71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
|
'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 >
|
||
|
|
)
|
||
|
|
}
|