mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 01:11: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 AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
|
||||
import Notifications from "./components/Notifications";
|
||||
import TestUI from "./components/TestUI";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -16,6 +17,7 @@ function App() {
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/thread/:id" element={<Thread />} />
|
||||
<Route path="/notifications" element={<Notifications />} />
|
||||
<Route path="/test" element={<TestUI />} />
|
||||
</Routes>
|
||||
<AddToHomeScreenPrompt/>
|
||||
</Router>
|
||||
|
@ -163,7 +163,7 @@ const NewNoteCard = ({
|
||||
<CpuChipIcon className="h-4 w-4" />
|
||||
</div>
|
||||
<p className="text-xs font-medium text-neutral-400">
|
||||
{difficulty} PoW
|
||||
{difficulty} Work
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -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>
|
||||
<div className={`ml-2 text-neutral-500 text-sm ${sortByTime ? 'text-neutral-500' : ''}`}>
|
||||
{sortByTime ? 'PoW' : 'Time'}
|
||||
{sortByTime ? 'Sort by Work' : 'Sort by Time'}
|
||||
</div>
|
||||
</label>}
|
||||
{toggleAnon && <label htmlFor="toggleB" className="flex items-center cursor-pointer ml-4"> {/* Add margin-left here */}
|
||||
|
@ -1,7 +1,7 @@
|
||||
const Placeholder = () => {
|
||||
|
||||
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="animate-pulse flex space-x-4">
|
||||
<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) {
|
||||
return (
|
||||
<>
|
||||
<Placeholder />
|
||||
<div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
|
||||
<OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
|
Loading…
Reference in New Issue
Block a user