doot/TAO
1
0
Fork 0
mirror of https://github.com/smolgrrr/TAO.git synced 2024-09-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

loading state UI changes

Browse Source
This commit is contained in:
smolgrrr 2024-08-12 19:02:36 +10:00
parent 6bea0bf8f1
commit bdec63bcf1
7 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.tsx
View File

@ -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>

2
client/src/components/Forms/PostFormCard.tsx
View File

@ -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>

10
client/src/components/Modals/CheckMobile/CheckMobile.tsx
View File

@ -29,11 +29,11 @@ const AddToHomeScreenPrompt: React.FC = () => {
const detectMobileBrowser = () => {
return (
(navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/Windows Phone/i))
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/Windows Phone/i))
);
};

2
client/src/components/Modals/OptionsBar.tsx
View File

@ -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 */}

2
client/src/components/Modals/Placeholder.tsx
View File

@ -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
View 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;

6
client/src/components/Thread.tsx
View File

@ -110,7 +110,11 @@ const Thread = () => {
if (uniqEvents.length === 0) {
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 (