// title: Notification Delivery Channels "use client"; import { BellIcon, BellOffIcon, MailIcon, MessageSquareIcon, MonitorIcon, SmartphoneIcon, } from "lucide-react"; import { useState } from "react"; import { Card, CardDescription, CardHeader, CardPanel, CardTitle, } from "@/registry/default/ui/card"; import { Separator } from "@/registry/default/ui/separator"; import { Switch } from "@/registry/default/ui/switch"; const channels = [ { description: "Receive updates directly to your inbox", icon: MailIcon, id: "channel-email", label: "Email", }, { description: "Alerts sent to your registered phone", icon: SmartphoneIcon, id: "channel-sms", label: "SMS", }, { description: "Banner alerts while using the app", icon: MonitorIcon, id: "channel-in-app", label: "In-app", }, { description: "Notifications pushed to your device", icon: MessageSquareIcon, id: "channel-push", label: "Push", }, ]; export function Pattern() { const [globalEnabled, setGlobalEnabled] = useState(true); const [channelState, setChannelState] = useState>({ "channel-email": true, "channel-in-app": true, "channel-push": false, "channel-sms": false, }); const toggle = (id: string, val: boolean) => setChannelState((prev) => ({ ...prev, [id]: val })); return (

{globalEnabled ? ( ) : ( )}

Notifications {globalEnabled ? "Receiving alerts" : "All alerts paused"}

Delivery channels

{channels.map((channel, index) => { const Icon = channel.icon; const isActive = globalEnabled && channelState[channel.id]; return (

{channel.label}

{channel.description}

toggle(channel.id, val)} size="sm" /> {index < channels.length - 1 && }

); })}

); }