⚡ Upgrade design & moved backend here & login and settings work with api

2024-09-29 18:04:41 +02:00
parent 42d3212624
commit f2d1eb4289
43 changed files with 1881 additions and 359 deletions
@@ -0,0 +1,80 @@
+'use client';
+
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------------ React --------------------------------------------------------
+import { FormEvent } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import CheckIcon from '@/assets/CheckIcon';
+import CloseIcon from '@/assets/CloseIcon';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const InlineInput = ({
+	label = '',
+	name = '',
+	type = 'text',
+	placeholder = '',
+	defaultValue = '',
+	autoComplete = 'off',
+	onSubmit = (value?: string) => {},
+}) => {
+	const handleSubmit = (ev: FormEvent<HTMLFormElement>) => {
+		ev.preventDefault();
+
+		if (!ev.currentTarget.reportValidity()) {
+			return;
+		}
+
+		const formData = new FormData(ev.currentTarget);
+
+		const value = formData.get(name);
+
+		onSubmit(value ? value.toString() : null);
+	};
+
+	return (
+		<form
+			className='inlineInputContainer'
+			onSubmit={handleSubmit}
+		>
+			<label
+				htmlFor={name}
+				className='inlineInputLabel'
+			>
+				{label}
+			</label>
+
+			<div className='inlineInputRow'>
+				<input
+					type={type}
+					name={name}
+					id={name}
+					defaultValue={defaultValue}
+					placeholder={placeholder}
+					autoComplete={autoComplete}
+					className='inlineInput'
+					required
+				/>
+				<button
+					type='reset'
+					className='inlineInputButton'
+				>
+					<CloseIcon />
+				</button>
+				<button
+					type='submit'
+					className='inlineInputButton'
+				>
+					<CheckIcon />
+				</button>
+			</div>
+		</form>
+	);
+};
+
+export default InlineInput;