96 lines
2.5 KiB
TypeScript
96 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
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');
|
|
|
|
const t = useTranslations('Global');
|
|
|
|
return (
|
|
<div className="settings-form">
|
|
<div className="form-section">
|
|
<h3 className="form-section-title">
|
|
{t('personal-data')}
|
|
</h3>
|
|
<form action={formAction}>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('full-name')}:
|
|
</label>
|
|
<input type="text" name="full_name" className="form-input" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('company')}:
|
|
</label>
|
|
<input type="text" name="company" className="form-input" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('email')}:
|
|
</label>
|
|
<input type="text" name="email" className="form-input" />
|
|
<small>
|
|
{t('email-cant-change')}
|
|
</small>
|
|
</div>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('phone')}:
|
|
</label>
|
|
<input type="phone" name="phone" className="form-input" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('gender')}:
|
|
</label>
|
|
<select
|
|
name="gender"
|
|
className="form-input"
|
|
value={selectedValue}
|
|
onChange={(e) => setSelectedValue(e.target.value)}
|
|
>
|
|
<option value="male">
|
|
{t('male')}
|
|
</option>
|
|
<option value="female">
|
|
{t('female')}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('birthday')}:
|
|
</label>
|
|
<input type="date" name="birthday" className="form-input" />
|
|
<small>
|
|
{t('used-to-send-congratulations')}
|
|
</small>
|
|
</div>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('age')}:
|
|
</label>
|
|
<input type="text" name="age" className="form-input" />
|
|
<small>
|
|
{t('automatically-filled-in-based-on-date-of-birth')}
|
|
</small>
|
|
</div>
|
|
|
|
<button type="submit" className="btn btn-primary">
|
|
{t('save-changes')}
|
|
</button>
|
|
</form>
|
|
</div >
|
|
</div >
|
|
)
|
|
} |