mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
loading state UI changes
This commit is contained in:
parent
6bea0bf8f1
commit
bdec63bcf1
@ -6,6 +6,7 @@ import Thread from "./components/Thread";
|
|||||||
import Header from "./components/Header/Header";
|
import Header from "./components/Header/Header";
|
||||||
import AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
|
import AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
|
||||||
import Notifications from "./components/Notifications";
|
import Notifications from "./components/Notifications";
|
||||||
|
import TestUI from "./components/TestUI";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
@ -16,6 +17,7 @@ function App() {
|
|||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home />} />
|
||||||
<Route path="/thread/:id" element={<Thread />} />
|
<Route path="/thread/:id" element={<Thread />} />
|
||||||
<Route path="/notifications" element={<Notifications />} />
|
<Route path="/notifications" element={<Notifications />} />
|
||||||
|
<Route path="/test" element={<TestUI />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
<AddToHomeScreenPrompt/>
|
<AddToHomeScreenPrompt/>
|
||||||
</Router>
|
</Router>
|
||||||
|
@ -163,7 +163,7 @@ const NewNoteCard = ({
|
|||||||
<CpuChipIcon className="h-4 w-4" />
|
<CpuChipIcon className="h-4 w-4" />
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs font-medium text-neutral-400">
|
<p className="text-xs font-medium text-neutral-400">
|
||||||
{difficulty} PoW
|
{difficulty} Work
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -29,11 +29,11 @@ const AddToHomeScreenPrompt: React.FC = () => {
|
|||||||
const detectMobileBrowser = () => {
|
const detectMobileBrowser = () => {
|
||||||
return (
|
return (
|
||||||
(navigator.userAgent.match(/Android/i) ||
|
(navigator.userAgent.match(/Android/i) ||
|
||||||
navigator.userAgent.match(/webOS/i) ||
|
navigator.userAgent.match(/webOS/i) ||
|
||||||
navigator.userAgent.match(/iPhone/i) ||
|
navigator.userAgent.match(/iPhone/i) ||
|
||||||
navigator.userAgent.match(/iPad/i) ||
|
navigator.userAgent.match(/iPad/i) ||
|
||||||
navigator.userAgent.match(/iPod/i) ||
|
navigator.userAgent.match(/iPod/i) ||
|
||||||
navigator.userAgent.match(/Windows Phone/i))
|
navigator.userAgent.match(/Windows Phone/i))
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ const OptionsBar: React.FC<OptionsBarProps> = ({ sortByTime, setAnon, toggleSort
|
|||||||
<div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : ''}`} ></div>
|
<div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : ''}`} ></div>
|
||||||
</div>
|
</div>
|
||||||
<div className={`ml-2 text-neutral-500 text-sm ${sortByTime ? 'text-neutral-500' : ''}`}>
|
<div className={`ml-2 text-neutral-500 text-sm ${sortByTime ? 'text-neutral-500' : ''}`}>
|
||||||
{sortByTime ? 'PoW' : 'Time'}
|
{sortByTime ? 'Sort by Work' : 'Sort by Time'}
|
||||||
</div>
|
</div>
|
||||||
</label>}
|
</label>}
|
||||||
{toggleAnon && <label htmlFor="toggleB" className="flex items-center cursor-pointer ml-4"> {/* Add margin-left here */}
|
{toggleAnon && <label htmlFor="toggleB" className="flex items-center cursor-pointer ml-4"> {/* Add margin-left here */}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
const Placeholder = () => {
|
const Placeholder = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
<div className="mx-auto gap-4 p-4">
|
||||||
<div className="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
|
<div className="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
|
||||||
<div className="animate-pulse flex space-x-4">
|
<div className="animate-pulse flex space-x-4">
|
||||||
<div className="rounded-full bg-slate-700 h-10 w-10"></div>
|
<div className="rounded-full bg-slate-700 h-10 w-10"></div>
|
||||||
|
21
client/src/components/TestUI.tsx
Normal file
21
client/src/components/TestUI.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import Placeholder from "./Modals/Placeholder";
|
||||||
|
import OptionsBar from "./Modals/OptionsBar";
|
||||||
|
|
||||||
|
const TestUI = () => {
|
||||||
|
const [sortByTime, setSortByTime] = useState(true);
|
||||||
|
|
||||||
|
const toggleSort = () => {
|
||||||
|
setSortByTime(prev => !prev);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Placeholder />
|
||||||
|
<div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
|
||||||
|
<OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TestUI;
|
@ -110,7 +110,11 @@ const Thread = () => {
|
|||||||
|
|
||||||
if (uniqEvents.length === 0) {
|
if (uniqEvents.length === 0) {
|
||||||
return (
|
return (
|
||||||
<Placeholder />
|
<>
|
||||||
|
<Placeholder />
|
||||||
|
<div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
|
||||||
|
<OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user