✨ Design of profile page

2024-09-05 19:23:11 +02:00
parent aebde116b2
commit 3b90f9acd2
10 changed files with 1215 additions and 24 deletions
@@ -0,0 +1,113 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      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;