93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { useForm, Controller } from 'react-hook-form';
|
|
import { z } from 'zod';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
|
const appearanceFormSchema = z.object({
|
|
theme: z.enum(['light', 'dark'], {
|
|
required_error: 'Please select a theme.',
|
|
}),
|
|
font: z.enum(['inter', 'manrope', 'system'], {
|
|
invalid_type_error: 'Select a font',
|
|
required_error: 'Please select a font.',
|
|
}),
|
|
});
|
|
|
|
type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
|
|
|
|
const defaultValues: Partial<AppearanceFormValues> = {
|
|
theme: 'light',
|
|
};
|
|
|
|
export function AppearanceForm() {
|
|
const { control, handleSubmit } = useForm<AppearanceFormValues>({
|
|
resolver: zodResolver(appearanceFormSchema),
|
|
defaultValues,
|
|
});
|
|
|
|
const onSubmit = (data: AppearanceFormValues) => {
|
|
console.log(JSON.stringify(data, null, 2));
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium mb-1">Font</label>
|
|
<Controller
|
|
control={control}
|
|
name="font"
|
|
render={({ field: { onChange, value } }) => (
|
|
<select
|
|
className="w-full p-2 border rounded"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
>
|
|
<option value="inter">Inter</option>
|
|
<option value="manrope">Manrope</option>
|
|
<option value="system">System</option>
|
|
</select>
|
|
)}
|
|
/>
|
|
<p className="text-sm text-gray-500">
|
|
Set the font you want to use in the dashboard.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium mb-1">Theme</label>
|
|
<p className="text-sm text-gray-500 mb-2">
|
|
Select the theme for the dashboard.
|
|
</p>
|
|
<Controller
|
|
control={control}
|
|
name="theme"
|
|
render={({ field: { onChange, value } }) => (
|
|
<div className="flex space-x-4">
|
|
<button
|
|
type="button"
|
|
className={`px-4 py-2 rounded ${value === 'light' ? 'bg-gray-200' : 'bg-white'}`}
|
|
onClick={() => onChange('light')}
|
|
>
|
|
Light
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`px-4 py-2 rounded ${value === 'dark' ? 'bg-gray-200' : 'bg-white'}`}
|
|
onClick={() => onChange('dark')}
|
|
>
|
|
Dark
|
|
</button>
|
|
</div>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
|
onClick={handleSubmit(onSubmit)}
|
|
>
|
|
Update preferences
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|