✨ 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,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;
@@ -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;
+	}
+}