95 lines
2.9 KiB
React
95 lines
2.9 KiB
React
'use client';
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// --------------------------------------------------- Components ------------------------------------------------------
|
|
import Link from 'next/link';
|
|
import SlotCounter from 'react-slot-counter';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { useData } from './hooks/useData';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import SettingsIcon from '@/assets/SettingsIcon';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Statistics = () => {
|
|
const { userData } = useData();
|
|
|
|
if (!userData) {
|
|
return;
|
|
}
|
|
|
|
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>
|
|
|
|
<Link
|
|
href={'/settings'}
|
|
className='settingsButton'
|
|
>
|
|
<SettingsIcon />
|
|
</Link>
|
|
</div>
|
|
<div className='separator' />
|
|
<div className='statistics'>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={'00'}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-bottom'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Loves par semaine</p>
|
|
</div>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={'00'}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-bottom'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Loves par mois</p>
|
|
</div>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={'00'}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-bottom'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Loves par an</p>
|
|
</div>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={'00'}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-bottom'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Loves total</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Statistics;
|