import React from 'react'
import { Label } from "@/components/ui/label";
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";


const DefaultRadioCode = () => {
  return (
    <>
      <div className="mt-4">
        <RadioGroup defaultValue="comfortable">
        <div className="flex items-top space-x-2">
          <RadioGroupItem value="default" id="r1" />
          <Label htmlFor="r1" className="font-normal">Default</Label>
        </div>
        <div className="flex items-top space-x-2">
          <RadioGroupItem value="comfortable" id="r2" />
          <Label htmlFor="r2" className="font-normal"> Comfortable</Label>
        </div>
        <div className="flex items-top space-x-2">
          <RadioGroupItem value="compact" id="r3" />
          <Label htmlFor="r3" className="font-normal">Compact</Label>
        </div>
        <div className="flex items-top space-x-2">
          <RadioGroupItem value="digital" id="r4" />
          <Label htmlFor="r4" className="font-normal">Digital</Label>
        </div>
        <div className="flex items-top space-x-2">
          <RadioGroupItem value="Enlarge" id="r5" />
          <Label htmlFor="r5" className="font-normal">Enlarge</Label>
        </div>
        <div className="flex items-top space-x-2">
          <RadioGroupItem value="Maximize" id="r6" />
          <Label htmlFor="r6" className="font-normal">Maximize</Label>
        </div>
      </RadioGroup>
      </div>
    </>
  )
}

export default DefaultRadioCode

import React from 'react'
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { toast } from "@/hooks/use-toast";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

const FormSchema = z.object({
  type: z.enum(["all", "mentions", "none"], {
    required_error: "You need to select a notification type.",
  }),
});

const FormRadioCode = () => {
   const form = useForm<z.infer<typeof FormSchema>>({
      resolver: zodResolver(FormSchema),
    });
  
    function onSubmit(data: z.infer<typeof FormSchema>) {
      toast({
        title: "You submitted the following values:",
        description: (
          <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
            <code className="text-white">{JSON.stringify(data, null, 2)}</code>
          </pre>
        ),
      });
    }
  return (
    <>
      <div className="mt-4">
        <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-6"
        >
          <FormField
            control={form.control}
            name="type"
            render={({ field }) => (
              <FormItem className="space-y-3">
                <FormLabel>Notify me about...</FormLabel>
                <FormControl>
                  <RadioGroup
                    onValueChange={field.onChange}
                    defaultValue={field.value}
                    className="flex flex-col space-y-1"
                  >
                    <FormItem className="flex items-center space-x-3 space-y-0">
                      <FormControl>
                        <RadioGroupItem value="all" />
                      </FormControl>
                      <FormLabel className="font-normal">
                        All new messages
                      </FormLabel>
                    </FormItem>
                    <FormItem className="flex items-center space-x-3 space-y-0">
                      <FormControl>
                        <RadioGroupItem value="mentions" />
                      </FormControl>
                      <FormLabel className="font-normal">
                        Direct messages and mentions
                      </FormLabel>
                    </FormItem>
                    <FormItem className="flex items-center space-x-3 space-y-0">
                      <FormControl>
                        <RadioGroupItem value="none" />
                      </FormControl>
                      <FormLabel className="font-normal">Nothing</FormLabel>
                    </FormItem>
                  </RadioGroup>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Submit</Button>
        </form>
      </Form>
      </div>
    </>
  )
}

export default FormRadioCode