⚡ 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;
@@ -0,0 +1,50 @@
+.inlineInputContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+
+	& > .inlineInputLabel {
+		margin-left: 5px;
+		font-size: 1.1rem;
+		color: #d94253;
+	}
+
+	& > .inlineInputRow {
+		display: grid;
+		grid-template-columns: 1fr repeat(2, calc(1rem + 14px));
+		align-items: center;
+		gap: 5px;
+
+		& > .inlineInput {
+			padding: 7px 14px;
+			border: 1px solid #d94253;
+			border-radius: 5px;
+			background-color: #f5cfd3;
+			outline: none;
+			font-size: 0.9rem;
+			color: #d94253;
+			outline: none;
+
+			&::placeholder {
+				color: #d94253;
+			}
+		}
+
+		& > .inlineInputButton {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 5px;
+			border: none;
+			border-radius: 5px;
+			background-color: transparent;
+			color: #d94253;
+			cursor: pointer;
+			transition: background-color 0.3s ease;
+
+			&:hover {
+				background-color: rgba(#d94253, 0.5);
+			}
+		}
+	}
+}