57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
"use client";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { Button } from "@/components/ui/button";
|
|
import { toast } from "sonner";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
const schema = z.object({
|
|
message: z
|
|
.string()
|
|
.min(1, { message: "Please select a subject to display." }),
|
|
});
|
|
|
|
const ValidateRadio = () => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<z.infer<typeof schema>>({
|
|
resolver: zodResolver(schema),
|
|
});
|
|
|
|
function onSubmit(data: z.infer<typeof schema>) {
|
|
toast.message(JSON.stringify(data, null, 2));
|
|
}
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<p className="text-sm mb-4 font-medium text-default-600">
|
|
Notify me about...
|
|
</p>
|
|
<RadioGroup {...register("message")} className="gap-4 rtl:justify-end">
|
|
<div className="flex gap-2 items-center">
|
|
<RadioGroupItem value="rad_1" id="rad_1" />
|
|
<Label htmlFor="rad_1"> All new messages</Label>
|
|
</div>
|
|
<div className="flex gap-2 items-center">
|
|
<RadioGroupItem value="rad_2" id="rad_2" />
|
|
<Label htmlFor="rad_2"> Direct messages and mentions</Label>
|
|
</div>
|
|
|
|
<div className="flex gap-2 items-center">
|
|
<RadioGroupItem value="rad_3" id="rad_3" />
|
|
<Label htmlFor="rad_3"> Nothing</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
{errors.message && <p className="text-destructive">{errors.message.message}</p>}
|
|
<div>
|
|
<Button type="submit" className="mt-2">Submit</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ValidateRadio;
|