114 lines
3.3 KiB
React
114 lines
3.3 KiB
React
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// --------------------------------------------------- Components ------------------------------------------------------
|
|
import Link from 'next/link';
|
|
import SlotCounter from 'react-slot-counter';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import SettingsIcon from '@/assets/SettingsIcon';
|
|
import ArrowRightIcon from '@/assets/ArrowRightIcon';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Account = () => {
|
|
return (
|
|
<div className='accountContainer'>
|
|
<div className='header'>
|
|
<div className='infosContainer'>
|
|
<p className='username'>Un Épicier</p>
|
|
<p className='sinceDate'>Créé le: 02/09/2024</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'>Followers</p>
|
|
</div>
|
|
<div className='statistic'>
|
|
<SlotCounter
|
|
value={'00'}
|
|
startValue={'00'}
|
|
startValueOnce
|
|
dummyCharacterCount={10}
|
|
direction='top-bottom'
|
|
containerClassName='slotCounter'
|
|
/>
|
|
<p className='statName'>Suivis</p>
|
|
</div>
|
|
<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 className='buttonsContainer'>
|
|
<button className='button'>
|
|
Followers <ArrowRightIcon />
|
|
</button>
|
|
<button className='button'>
|
|
Suivis <ArrowRightIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Account;
|