✨ 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;