"use client";
import { useState } from "react";
import { Bell, Mail, Smartphone, MessageSquare } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
interface NotificationSetting {
id: string;
label: string;
description: string;
email: boolean;
push: boolean;
sms: boolean;
}
const defaultSettings: NotificationSetting[] = [
{
id: "security",
label: "Security Alerts",
description: "Login attempts, password changes, and suspicious activity",
email: true,
push: true,
sms: true,
},
{
id: "updates",
label: "Product Updates",
description: "New features, improvements, and release notes",
email: true,
push: false,
sms: false,
},
{
id: "activity",
label: "Activity Notifications",
description: "Comments, mentions, and team activity",
email: true,
push: true,
sms: false,
},
{
id: "marketing",
label: "Marketing & Promotions",
description: "Special offers, tips, and newsletters",
email: false,
push: false,
sms: false,
},
];
export const title = "React Dialog Block Notification Preferences";
export default function DialogNotificationPreferences() {
const [open, setOpen] = useState(false);
const [settings, setSettings] = useState<NotificationSetting[]>(defaultSettings);
const toggleSetting = (
id: string,
channel: "email" | "push" | "sms"
) => {
setSettings((prev) =>
prev.map((setting) =>
setting.id === id
? { ...setting, [channel]: !setting[channel] }
: setting
)
);
};
const handleSave = () => {
console.log("Saved settings:", settings);
setOpen(false);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<Bell className="mr-2 h-4 w-4" />
Notification Settings
</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Notification Preferences</DialogTitle>
<DialogDescription>
Choose how you want to be notified about different activities.
</DialogDescription>
</DialogHeader>
<div className="py-4">
{/* Channel headers */}
<div className="flex items-center justify-end gap-6 mb-4 pr-1">
<div className="flex flex-col items-center gap-1">
<Mail className="h-4 w-4 text-muted-foreground" />
<span className="text-xs text-muted-foreground">Email</span>
</div>
<div className="flex flex-col items-center gap-1">
<Smartphone className="h-4 w-4 text-muted-foreground" />
<span className="text-xs text-muted-foreground">Push</span>
</div>
<div className="flex flex-col items-center gap-1">
<MessageSquare className="h-4 w-4 text-muted-foreground" />
<span className="text-xs text-muted-foreground">SMS</span>
</div>
</div>
<Separator className="mb-4" />
{/* Notification settings */}
<div className="space-y-4">
{settings.map((setting) => (
<div
key={setting.id}
className="flex items-start justify-between gap-4"
>
<div className="flex-1 space-y-1">
<Label className="text-sm font-medium">{setting.label}</Label>
<p className="text-xs text-muted-foreground">
{setting.description}
</p>
</div>
<div className="flex items-center gap-6">
<Switch
checked={setting.email}
onCheckedChange={() => toggleSetting(setting.id, "email")}
aria-label={`${setting.label} email notifications`}
/>
<Switch
checked={setting.push}
onCheckedChange={() => toggleSetting(setting.id, "push")}
aria-label={`${setting.label} push notifications`}
/>
<Switch
checked={setting.sms}
onCheckedChange={() => toggleSetting(setting.id, "sms")}
aria-label={`${setting.label} SMS notifications`}
/>
</div>
</div>
))}
</div>
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button variant="outline" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button onClick={handleSave}>Save Preferences</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}