"use client"; import { Bell, Loader2, Mail, MessageSquare, Save, Smartphone, } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Field, FieldContent, FieldDescription, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; import { Separator } from "@/registry/new-york/ui/separator"; import { Switch } from "@/registry/new-york/ui/switch"; export interface NotificationChannel { email: boolean; push: boolean; inApp: boolean; sms: boolean; } export interface NotificationCategory { id: string; name: string; description: string; channels: NotificationChannel; frequency?: "realtime" | "digest-daily" | "digest-weekly" | "off"; } export interface NotificationPreferences { categories: NotificationCategory[]; quietHoursEnabled: boolean; quietHoursStart?: string; quietHoursEnd?: string; } export interface SettingsNotificationsProps { preferences?: NotificationPreferences; onSave?: (data: NotificationPreferences) => Promise; className?: string; } const defaultCategories: NotificationCategory[] = [ { id: "mentions", name: "Mentions", description: "When someone mentions you", channels: { email: true, push: true, inApp: true, sms: false }, frequency: "realtime", }, { id: "replies", name: "Replies", description: "When someone replies to your messages", channels: { email: true, push: true, inApp: true, sms: false }, frequency: "realtime", }, { id: "system", name: "System Alerts", description: "Important system notifications", channels: { email: true, push: true, inApp: true, sms: true }, frequency: "realtime", }, { id: "marketing", name: "Marketing", description: "Promotional emails and updates", channels: { email: true, push: false, inApp: false, sms: false }, frequency: "digest-weekly", }, { id: "security", name: "Security", description: "Security alerts and login notifications", channels: { email: true, push: true, inApp: true, sms: true }, frequency: "realtime", }, ]; const defaultPreferences: NotificationPreferences = { categories: defaultCategories, quietHoursEnabled: false, quietHoursStart: "22:00", quietHoursEnd: "08:00", }; export default function SettingsNotifications({ preferences = defaultPreferences, onSave, className, }: SettingsNotificationsProps) { const [isSaving, setIsSaving] = useState(false); const [localPreferences, setLocalPreferences] = useState(preferences); const handleSave = async () => { setIsSaving(true); try { await onSave?.(localPreferences); } finally { setIsSaving(false); } }; const updateCategoryChannel = ( categoryId: string, channel: keyof NotificationChannel, enabled: boolean ) => { setLocalPreferences((prev) => ({ ...prev, categories: prev.categories.map((cat) => cat.id === categoryId ? { ...cat, channels: { ...cat.channels, [channel]: enabled }, } : cat ), })); }; const updateCategoryFrequency = ( categoryId: string, frequency: "realtime" | "digest-daily" | "digest-weekly" | "off" ) => { setLocalPreferences((prev) => ({ ...prev, categories: prev.categories.map((cat) => cat.id === categoryId ? { ...cat, frequency } : cat ), })); }; const getFrequencyLabel = ( frequency?: "realtime" | "digest-daily" | "digest-weekly" | "off" ) => { switch (frequency) { case "realtime": return "Real-time"; case "digest-daily": return "Daily Digest"; case "digest-weekly": return "Weekly Digest"; case "off": return "Off"; default: return "Real-time"; } }; return (

Notification Preferences Manage how and when you receive notifications

{/* Notification Categories */}

{localPreferences.categories.map((category) => (

{category.name}

{category.description}

updateCategoryChannel(category.id, "email", checked) } />

Push

updateCategoryChannel(category.id, "push", checked) } />

In-App

updateCategoryChannel(category.id, "inApp", checked) } />

SMS

updateCategoryChannel(category.id, "sms", checked) } />

))}

{/* Quiet Hours */}

Quiet Hours

Enable Quiet Hours Pause non-urgent notifications during these hours

setLocalPreferences((prev) => ({ ...prev, quietHoursEnabled: checked, })) } />

{localPreferences.quietHoursEnabled && (

Start Time setLocalPreferences((prev) => ({ ...prev, quietHoursStart: e.target.value, })) } type="time" value={localPreferences.quietHoursStart || "22:00"} /> End Time setLocalPreferences((prev) => ({ ...prev, quietHoursEnd: e.target.value, })) } type="time" value={localPreferences.quietHoursEnd || "08:00"} />

)}

); }

Mentions

Replies

System Alerts

Marketing

Security

Product Updates

Quiet Hours

Example Usage

Mentions

Replies

System Alerts

Marketing

Security

Product Updates

Quiet Hours