"use client"; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/components/ui/form"; import { Switch } from "@/components/ui/switch"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; const formSchema = z.object({ type: z.enum(["all", "mentions", "none"], { required_error: "You need to select a notification type." }), mobile: z.boolean().default(false).optional(), communication_emails: z.boolean().default(false).optional(), social_emails: z.boolean().default(false).optional(), marketing_emails: z.boolean().default(false).optional(), security_emails: z.boolean() }); type NotificationsFormValues = z.infer; export default function NotificationSettingsSwitchExample() { const form = useForm({ resolver: zodResolver(formSchema) }); return ( <>

Email Notifications

(

Communication emails Receive emails about your account activity.

)} /> (

Marketing emails Receive emails about new products, features, and more.

)} /> (

Social emails Receive emails for friend requests, follows, and more.

)} /> (

Security emails Receive emails about your account activity and security.

)} />

); }

Switch Cards

Unlock all components now.