wheel-picker-block-02

1"use client";
2 
3import { zodResolver } from "@hookform/resolvers/zod";
4import type { SubmitHandler } from "react-hook-form";
5import { useForm } from "react-hook-form";
6import { toast } from "sonner";
7import { z } from "zod";
8 
9import { Button } from "@/components/ui/button";
10import {
11  Form,
12  FormControl,
13  FormField,
14  FormItem,
15  FormLabel,
16  FormMessage,
17} from "@/components/ui/form";
18import type { WheelPickerOption } from "@/registry/wheel-picker";
19import { WheelPicker, WheelPickerWrapper } from "@/registry/wheel-picker";
20 
21const formSchema = z.object({
22  framework: z.string(),
23});
24 
25type FormSchema = z.infer<typeof formSchema>;
26 
27const options: WheelPickerOption[] = [
28  {
29    label: "Vite",
30    value: "vite",
31  },
32  {
33    label: "Laravel",
34    value: "laravel",
35  },
36  {
37    label: "React Router",
38    value: "react-router",
39  },
40  {
41    label: "Next.js",
42    value: "nextjs",
43  },
44  {
45    label: "Astro",
46    value: "astro",
47  },
48  {
49    label: "TanStack Start",
50    value: "tanstack-start",
51  },
52  {
53    label: "TanStack Router",
54    value: "tanstack-router",
55  },
56  {
57    label: "Gatsby",
58    value: "gatsby",
59  },
60];
61 
62export default function WheelPickerFormDemo() {
63  const form = useForm<FormSchema>({
64    resolver: zodResolver(formSchema),
65    defaultValues: {
66      framework: "nextjs",
67    },
68  });
69 
70  const onSubmit: SubmitHandler<FormSchema> = (values) => {
71    toast("You submitted the following values:", {
72      description: (
73        <pre className="mt-2 w-80 rounded-lg bg-zinc-950 p-4">
74          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
75        </pre>
76      ),
77    });
78  };
79 
80  return (
81    <Form {...form}>
82      <form
83        onSubmit={form.handleSubmit(onSubmit)}
84        className="w-56 max-w-full space-y-4"
85      >
86        <FormField
87          control={form.control}
88          name="framework"
89          render={({ field }) => (
90            <FormItem>
91              <FormLabel>Framework</FormLabel>
92 
93              <FormControl>
94                <WheelPickerWrapper>
95                  <WheelPicker
96                    options={options}
97                    value={field.value}
98                    onValueChange={field.onChange}
99                  />
100                </WheelPickerWrapper>
101              </FormControl>
102 
103              <FormMessage />
104            </FormItem>
105          )}
106        />
107 
108        <div className="flex justify-center">
109          <Button type="submit">Submit</Button>
110        </div>
111      </form>
112    </Form>
113  );
114}