116 lines
3.4 KiB
TypeScript
116 lines
3.4 KiB
TypeScript
'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, stats } = useData();
|
|
|
|
const logout = () => {
|
|
localStorage.clear();
|
|
router.push('/auth/login');
|
|
};
|
|
|
|
return (
|
|
<div className='accountContainer'>
|
|
{!userData ? (
|
|
<p className='loading'>Chargement...</p>
|
|
) : (
|
|
<>
|
|
<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='statistics'>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={stats.week}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-down'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Loves par semaine</p>
|
|
</div>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={stats.month}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-down'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Loves par mois</p>
|
|
</div>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={stats.year}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-down'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Loves par an</p>
|
|
</div>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={stats.total}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-down'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Loves total</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Statistics;
|