80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
|
|
import React from 'react';
|
|
import { useForm, Controller } from 'react-hook-form';
|
|
import { z } from 'zod';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
|
const items = [
|
|
{ id: 'recents', label: 'Recents' },
|
|
{ id: 'home', label: 'Home' },
|
|
{ id: 'applications', label: 'Applications' },
|
|
{ id: 'desktop', label: 'Desktop' },
|
|
{ id: 'downloads', label: 'Downloads' },
|
|
{ id: 'documents', label: 'Documents' },
|
|
];
|
|
|
|
const displayFormSchema = z.object({
|
|
items: z.array(z.string()).refine((value) => value.some((item) => item), {
|
|
message: "You have to select at least one item.",
|
|
}),
|
|
});
|
|
|
|
type DisplayFormValues = z.infer<typeof displayFormSchema>;
|
|
|
|
const defaultValues: Partial<DisplayFormValues> = {
|
|
items: ['recents', 'home'],
|
|
};
|
|
|
|
export function DisplayForm() {
|
|
const { control, handleSubmit } = useForm<DisplayFormValues>({
|
|
resolver: zodResolver(displayFormSchema),
|
|
defaultValues,
|
|
});
|
|
|
|
const onSubmit = (data: DisplayFormValues) => {
|
|
console.log(JSON.stringify(data, null, 2));
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h3 className="text-sm font-medium mb-2">Sidebar</h3>
|
|
<p className="text-sm text-gray-500 mb-4">
|
|
Select the items you want to display in the sidebar.
|
|
</p>
|
|
{items.map((item) => (
|
|
<Controller
|
|
key={item.id}
|
|
control={control}
|
|
name="items"
|
|
render={({ field }) => (
|
|
<div className="flex items-center mb-3">
|
|
<input
|
|
type="checkbox"
|
|
id={item.id}
|
|
checked={field.value?.includes(item.id)}
|
|
onChange={(e) => {
|
|
const updatedValue = e.target.checked
|
|
? [...field.value, item.id]
|
|
: field.value?.filter((value) => value !== item.id);
|
|
field.onChange(updatedValue);
|
|
}}
|
|
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
/>
|
|
<label htmlFor={item.id} className="ml-2 text-sm">
|
|
{item.label}
|
|
</label>
|
|
</div>
|
|
)}
|
|
/>
|
|
))}
|
|
<button
|
|
className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
|
onClick={handleSubmit(onSubmit)}
|
|
>
|
|
Update display
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|