✨ Edit profile page

2024-09-13 19:09:51 +02:00
parent 3b90f9acd2
commit 172208a978
16 changed files with 414 additions and 100 deletions
@@ -0,0 +1,73 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// --------------------------------------------------- Components ------------------------------------------------------
+import Link from 'next/link';
+import Input from '@/components/Input/Input';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import ArrowRightIcon from '@/assets/ArrowRightIcon';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Settings = () => {
+	return (
+		<div className='settings'>
+			<div className='header'>
+				<Link
+					href={'/statistics'}
+					className='backButton'
+				>
+					<ArrowRightIcon
+						style={{
+							rotate: '180deg',
+						}}
+					/>
+				</Link>
+				<p className='title'>Éditer le profil</p>
+			</div>
+
+			<form className='form'>
+				<Input
+					label="Nom d'utilisateur"
+					type='text'
+					name='username'
+					defaultValue='Un Épicier'
+					autoComplete='off'
+					required
+				/>
+				<Input
+					label='Mot de passe'
+					type='password'
+					name='password'
+					defaultValue='********'
+					autoComplete='off'
+					required
+				/>
+
+				<div className='buttonsContainer'>
+					<button
+						type='reset'
+						className='resetButton'
+					>
+						Annuler
+					</button>
+					<button
+						type='submit'
+						className='submitButton'
+					>
+						Appliquer
+					</button>
+				</div>
+			</form>
+
+			<div className='separator' />
+
+			<button className='deleteButton'>Supprimer mon compte</button>
+		</div>
+	);
+};
+
+export default Settings;
@@ -0,0 +1,93 @@
+.settings {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	width: 100%;
+	background-color: #d94253;
+
+	& > .header {
+		display: grid;
+		grid-template-columns: 25px 1fr;
+		align-items: center;
+		gap: 15px;
+		padding: 15px;
+		color: #ffffff;
+		box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
+
+		& > .backButton {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		& > .title {
+			font-size: 1.2rem;
+		}
+	}
+
+	& > .form {
+		display: grid;
+		grid-template-rows: repeat(2, 1fr);
+		align-items: center;
+		gap: 20px;
+		padding: 20px;
+		padding-bottom: 0;
+
+		& > .buttonsContainer {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 20px;
+
+			& > .submitButton,
+			& > .resetButton {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: 5px;
+				padding: 10px;
+				border: 1px solid #ffffff;
+				border-radius: 5px;
+				background-color: #ffffff;
+				font-size: 1rem;
+				color: #d94253;
+				cursor: pointer;
+			}
+
+			& > .resetButton {
+				background-color: #d94253;
+				color: #ffffff;
+			}
+		}
+	}
+
+	& > .separator {
+		display: block;
+		margin: 20px auto;
+		width: 90%;
+		height: 1px;
+		background-color: rgb(254, 254, 250);
+		background: linear-gradient(
+			90deg,
+			rgba(254, 254, 250, 0) 0%,
+			rgba(254, 254, 250, 1) 10%,
+			rgba(254, 254, 250, 1) 90%,
+			rgba(254, 254, 250, 0) 100%
+		);
+	}
+
+	& > .deleteButton {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 5px;
+		margin: 0 20px;
+		padding: 10px;
+		border: 1px solid #d80135;
+		border-radius: 5px;
+		background-color: #d80135;
+		font-size: 1rem;
+		color: #ffffff;
+		cursor: pointer;
+	}
+}