143 lines
4.1 KiB
TypeScript
143 lines
4.1 KiB
TypeScript
|
|
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { useForm, Controller } from 'react-hook-form';
|
|
import { z } from 'zod';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
|
const accountFormSchema = z.object({
|
|
name: z
|
|
.string()
|
|
.min(2, {
|
|
message: "Name must be at least 2 characters.",
|
|
})
|
|
.max(30, {
|
|
message: "Name must not be longer than 30 characters.",
|
|
}),
|
|
dob: z.date({
|
|
required_error: "A date of birth is required.",
|
|
}),
|
|
language: z.string({
|
|
required_error: "Please select a language.",
|
|
}),
|
|
});
|
|
|
|
type AccountFormValues = z.infer<typeof accountFormSchema>;
|
|
|
|
const defaultValues: Partial<AccountFormValues> = {
|
|
name: "Your name",
|
|
dob: new Date("2000-01-01"),
|
|
language: "en",
|
|
};
|
|
|
|
const languages = [
|
|
{ label: "English", value: "en" },
|
|
{ label: "French", value: "fr" },
|
|
{ label: "German", value: "de" },
|
|
{ label: "Spanish", value: "es" },
|
|
{ label: "Portuguese", value: "pt" },
|
|
{ label: "Russian", value: "ru" },
|
|
{ label: "Japanese", value: "ja" },
|
|
{ label: "Korean", value: "ko" },
|
|
{ label: "Chinese", value: "zh" },
|
|
];
|
|
|
|
export function AccountForm() {
|
|
const [showDatePicker, setShowDatePicker] = useState(false);
|
|
const { control, handleSubmit } = useForm<AccountFormValues>({
|
|
resolver: zodResolver(accountFormSchema),
|
|
defaultValues,
|
|
});
|
|
|
|
const onSubmit = (data: AccountFormValues) => {
|
|
console.log(JSON.stringify(data, null, 2));
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Controller
|
|
control={control}
|
|
name="name"
|
|
render={({ field: { onChange, value } }) => (
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium mb-1">Name</label>
|
|
<input
|
|
className="w-full p-2 border rounded"
|
|
onChange={(e) => onChange(e.target.value)}
|
|
value={value}
|
|
placeholder="Your name"
|
|
/>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
This is the name that will be displayed on your profile and in emails.
|
|
</p>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name="dob"
|
|
render={({ field: { onChange, value } }) => (
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium mb-1">Date of birth</label>
|
|
<button
|
|
type="button"
|
|
className="w-full p-2 border rounded text-left"
|
|
onClick={() => setShowDatePicker(true)}
|
|
>
|
|
{value.toDateString()}
|
|
</button>
|
|
{showDatePicker && (
|
|
<input
|
|
type="date"
|
|
value={value.toISOString().split('T')[0]}
|
|
onChange={(e) => {
|
|
setShowDatePicker(false);
|
|
if (e.target.value) {
|
|
onChange(new Date(e.target.value));
|
|
}
|
|
}}
|
|
className="mt-1 p-1 border rounded"
|
|
/>
|
|
)}
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Your date of birth is used to calculate your age.
|
|
</p>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name="language"
|
|
render={({ field: { onChange, value } }) => (
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium mb-1">Language</label>
|
|
<select
|
|
className="w-full p-2 border rounded"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
>
|
|
{languages.map((language) => (
|
|
<option key={language.value} value={language.value}>
|
|
{language.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
This is the language that will be used in the dashboard.
|
|
</p>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
<button
|
|
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
|
onClick={handleSubmit(onSubmit)}
|
|
>
|
|
Update account
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|