⚡ Upgrade design & moved backend here & login and settings work with api

2024-09-29 18:04:41 +02:00
parent 42d3212624
commit f2d1eb4289
43 changed files with 1881 additions and 359 deletions
@@ -0,0 +1,111 @@
+'use client';
+
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// --------------------------------------------------- Components ------------------------------------------------------
+import Link from 'next/link';
+import SlotCounter from 'react-slot-counter';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
+import { useRouter } from 'next/navigation';
+import { useData } from './hooks/useData';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import SettingsIcon from '@/assets/SettingsIcon';
+import { Logout } from '@/assets/Logout';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Statistics = () => {
+	const router = useRouter();
+	const { userData } = useData();
+
+	if (!userData) {
+		return;
+	}
+
+	const logout = () => {
+		localStorage.clear();
+		router.push('/auth/login');
+	};
+
+	return (
+		<div className='accountContainer'>
+			<div className='header'>
+				<div className='infosContainer'>
+					<p className='username'>{userData.username}</p>
+					<p className='sinceDate'>Créé le: {userData.createdat}</p>
+				</div>
+
+				<div className='buttonsContainer'>
+					<button
+						type='button'
+						className='button'
+						onClick={logout}
+					>
+						<Logout />
+					</button>
+					<Link
+						href={'/settings'}
+						className='button'
+					>
+						<SettingsIcon />
+					</Link>
+				</div>
+			</div>
+			<div className='separator' />
+			<div className='statistics'>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-down'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Loves par semaine</p>
+				</div>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-down'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Loves par mois</p>
+				</div>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-down'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Loves par an</p>
+				</div>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-down'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Loves total</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Statistics;