angle-slider-form-demo

1"use client";
2 
3import { zodResolver } from "@hookform/resolvers/zod";
4import * as React from "react";
5import { useForm } from "react-hook-form";
6import { toast } from "sonner";
7import * as z from "zod";
8import {
9  AngleSlider,
10  AngleSliderRange,
11  AngleSliderThumb,
12  AngleSliderTrack,
13  AngleSliderValue,
14} from "@/registry/bases/base/ui/angle-slider";
15import { Button } from "@/registry/bases/base/ui/button";
16import {
17  Form,
18  FormControl,
19  FormDescription,
20  FormField,
21  FormItem,
22  FormLabel,
23  FormMessage,
24} from "@/registry/bases/base/ui/form";
25 
26const formSchema = z.object({
27  rotation: z.array(z.number()).length(1),
28  range: z.array(z.number()).length(2),
29});
30 
31type FormSchema = z.infer<typeof formSchema>;
32 
33export default function AngleSliderFormDemo() {
34  const form = useForm<FormSchema>({
35    resolver: zodResolver(formSchema),
36    defaultValues: {
37      rotation: [45],
38      range: [90, 270],
39    },
40  });
41 
42  const onSubmit = React.useCallback((data: FormSchema) => {
43    toast.success(
44      <pre className="w-full">{JSON.stringify(data, null, 2)}</pre>,
45    );
46  }, []);
47 
48  const onReset = React.useCallback(() => {
49    form.reset();
50  }, [form]);
51 
52  return (
53    <Form {...form}>
54      <form
55        onSubmit={form.handleSubmit(onSubmit)}
56        className="flex flex-col gap-4"
57      >
58        <div className="grid grid-cols-2 gap-4">
59          <FormField
60            control={form.control}
61            name="rotation"
62            render={({ field }) => (
63              <FormItem className="place-items-center rounded-lg border p-6">
64                <FormLabel>Rotation angle</FormLabel>
65                <FormControl>
66                  <AngleSlider
67                    value={field.value}
68                    onValueChange={field.onChange}
69                    max={360}
70                    min={0}
71                    step={1}
72                    size={60}
73                    name={field.name}
74                  >
75                    <AngleSliderTrack>
76                      <AngleSliderRange />
77                    </AngleSliderTrack>
78                    <AngleSliderThumb />
79                    <AngleSliderValue />
80                  </AngleSlider>
81                </FormControl>
82                <FormDescription>
83                  Set the rotation angle in degrees (0-360°)
84                </FormDescription>
85                <FormMessage />
86              </FormItem>
87            )}
88          />
89          <FormField
90            control={form.control}
91// … truncated