add settings layout

src/app/ui/settings/personal-data-settings.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useActionState, useState } from 'react'
+
+export default function PersonalDataSettings() {
+	const [errorMessage, formAction, isPending] = useActionState(
+		(state: void | undefined, formData: FormData) => {
+			console.log(formData);
+		},
+		undefined
+	);
+
+	const [selectedValue, setSelectedValue] = useState('male');
+
+	return (
+		<div className="settings-form">
+			<div className="form-section">
+				<h3 className="form-section-title">👤 Персональные данные</h3>
+				<form action={formAction}>
+					<div className="form-group">
+						<label className="form-label">Полное имя:</label>
+						<input type="text" name="full_name" className="form-input" />
+					</div>
+					<div className="form-group">
+						<label className="form-label">Компания:</label>
+						<input type="text" name="company" className="form-input" />
+					</div>
+					<div className="form-group">
+						<label className="form-label">Email:</label>
+						<input type="text" name="email" className="form-input" />
+						<small>
+							Email нельзя изменить. Обратитесь в поддержку.
+						</small>
+					</div>
+					<div className="form-group">
+						<label className="form-label">Телефон:</label>
+						<input type="phone" name="phone" className="form-input" />
+					</div>
+					<div className="form-group">
+						<label className="form-label">Пол:</label>
+						<select
+							name="gender"
+							className="form-input"
+							value={selectedValue}
+							onChange={(e) => setSelectedValue(e.target.value)}
+						>
+							<option value="male">Мужской</option>
+							<option value="female">Женский</option>
+						</select>
+					</div>
+					<div className="form-group">
+						<label className="form-label">🎂 День рождения:</label>
+						<input type="date" name="birthday" className="form-input" />
+						<small>
+							Используется для отправки поздравления
+						</small>
+					</div>
+					<div className="form-group">
+						<label className="form-label">Возраст:</label>
+						<input type="text" name="age" className="form-input" />
+						<small>
+							Заполняется автоматически из даты рождения
+						</small>
+					</div>
+
+					<button type="submit" className="btn btn-primary">💾 Сохранить изменения</button>
+				</form>
+			</div >
+		</div >
+	)
+}