✨ Edit profile page

components/Input/Input.jsx

@@ -0,0 +1,88 @@
+'use client';
+
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------------ React --------------------------------------------------------
+import { forwardRef, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import EyeSlashIcon from '@/assets/EyeSlashIcon';
+import EyeIcon from '@/assets/EyeIcon';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Input = forwardRef(function InputComponent(
+	{
+		type = 'text',
+		label,
+		name,
+		value,
+		defaultValue,
+		autoComplete,
+		required = false,
+		onChange,
+		onKeyUp,
+		onKeyDown,
+	},
+	ref
+) {
+	const [isFocused, setIsFocused] = useState(
+		defaultValue || value ? true : false
+	);
+	const [passwordVisibility, setPasswordVisibility] = useState(false);
+
+	const defaultOnBlur = (ev) => {
+		if (ev.currentTarget.value != '') {
+			return;
+		}
+
+		setIsFocused(false);
+	};
+
+	return (
+		<div className='inputContainer'>
+			<input
+				ref={ref}
+				type={
+					type == 'password'
+						? passwordVisibility
+							? 'text'
+							: 'password'
+						: type
+				}
+				name={name}
+				id={name}
+				value={value}
+				defaultValue={defaultValue}
+				autoComplete={autoComplete}
+				required={required}
+				onChange={onChange}
+				onKeyUp={onKeyUp}
+				onKeyDown={onKeyDown}
+				className='input'
+				onFocus={() => setIsFocused(true)}
+				onBlur={defaultOnBlur}
+			/>
+			<label
+				htmlFor={name}
+				className={`inputLabel ${isFocused ? 'focused' : ''}`}
+			>
+				{label}
+			</label>
+			{type == 'password' && (
+				<button
+					type='button'
+					className='passwordToggleButton'
+					onClick={() => setPasswordVisibility((prev) => !prev)}
+				>
+					{passwordVisibility ? <EyeSlashIcon /> : <EyeIcon />}
+				</button>
+			)}
+		</div>
+	);
+});
+
+export default Input;

components/Input/styles.scss

@@ -0,0 +1,50 @@
+.inputContainer {
+	position: relative;
+	font-size: 1.1rem;
+
+	& > .inputLabel {
+		position: absolute;
+		top: 48%;
+		left: 10px;
+		transform: translateY(-50%);
+		padding: 0 4px;
+		background-color: #d94253;
+		font-size: 1em;
+		font-weight: 300;
+		color: #ffffff;
+		transition: top 0.3s ease, font-size 0.3s ease;
+		pointer-events: none;
+
+		&.focused {
+			top: 0;
+			font-size: 0.8em;
+		}
+	}
+
+	& > .input {
+		padding: 10px 20px;
+		width: 100%;
+		border: 1px solid #ffffff;
+		border-radius: 5px;
+		background-color: #d94253;
+		font-size: 1em;
+		font-weight: 300;
+		color: #ffffff;
+		outline: none;
+	}
+
+	& > .passwordToggleButton {
+		position: absolute;
+		top: 0;
+		right: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 7px;
+		width: calc(20px + 1em);
+		height: 100%;
+		border: none;
+		background-color: transparent;
+		color: #ffffff;
+	}
+}

components/Navbar/config.js

@@ -1,7 +1,6 @@
-import AccountIcon from '@/assets/AccountIcon';
+import StatsIcon from '@/assets/StatsIcon';
 import HeartIcon from '@/assets/HeartIcon';
 import MapIcon from '@/assets/MapIcon';
-import PeopleIcon from '@/assets/PeopleIcon';
 
 const config = [
 	{
@@ -15,14 +14,9 @@ const config = [
 		icon: HeartIcon,
 	},
 	{
-		title: 'Partenaire',
-		link: '/partner',
-		icon: PeopleIcon,
-	},
-	{
-		title: 'Profil',
-		link: '/account',
-		icon: AccountIcon,
+		title: 'Stats',
+		link: '/statistics',
+		icon: StatsIcon,
 	},
 ];
 

components/Navbar/styles.scss

@@ -7,7 +7,7 @@
 	width: 100svw;
 	height: var(--navSize);
 	background-color: #d94253;
-	box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
+	box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
 
 	& > .navButton {
 		position: relative;
@@ -39,7 +39,7 @@
 				width: 100%;
 				height: 100%;
 				border-radius: 50%;
-				box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
+				box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
 				clip-path: inset(-6px -6px 42px -6px);
 			}
 		}