"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; import { Badge } from "@/components/ui/badge"; import { Bell, Mail, ShoppingCart, TrendingUp, Users, BellRing, Loader2, Info, } from "lucide-react"; interface NotificationSettings { [key: string]: { email: boolean; push: boolean; }; } export const title = "React Account Block Notification Preferences"; export default function AccountNotifications01() { const [notifications, setNotifications] = useState({ comments: { email: true, push: true }, mentions: { email: true, push: true }, follows: { email: false, push: true }, likes: { email: false, push: false }, purchases: { email: true, push: true }, shipments: { email: true, push: true }, payments: { email: true, push: false }, newsletter: { email: false, push: false }, productUpdates: { email: true, push: false }, tips: { email: false, push: false }, }); const [isSaving, setIsSaving] = useState(false); const handleToggle = (key: string, channel: "email" | "push") => { setNotifications((prev) => ({ ...prev, [key]: { ...prev[key], [channel]: !prev[key][channel], }, })); }; const handleSave = () => { setIsSaving(true); setTimeout(() => { setIsSaving(false); }, 1500); }; const enabledCount = Object.values(notifications).reduce((acc, n) => { return acc + (n.email ? 1 : 0) + (n.push ? 1 : 0); }, 0); const totalCount = Object.keys(notifications).length * 2; const notificationCategories = [ { id: "activity", title: "Activity Notifications", icon: Users, iconBg: "bg-blue-100 text-blue-700", items: [ { key: "comments", label: "Comments", description: "Someone comments on your posts" }, { key: "mentions", label: "Mentions", description: "Someone mentions you in a post or comment" }, { key: "follows", label: "New Followers", description: "Someone starts following you" }, { key: "likes", label: "Likes", description: "Someone likes your post or comment" }, ], }, { id: "orders", title: "Orders & Purchases", icon: ShoppingCart, iconBg: "bg-green-100 text-green-700", items: [ { key: "purchases", label: "Order Confirmations", description: "Confirmation emails for your orders" }, { key: "shipments", label: "Shipping Updates", description: "Tracking and delivery notifications" }, { key: "payments", label: "Payment Receipts", description: "Receipts and billing information" }, ], }, { id: "marketing", title: "Marketing & Updates", icon: TrendingUp, iconBg: "bg-purple-100 text-purple-700", items: [ { key: "newsletter", label: "Newsletter", description: "Weekly newsletter with updates and tips", pushDisabled: true }, { key: "productUpdates", label: "Product Updates", description: "New features and improvements" }, { key: "tips", label: "Tips & Tutorials", description: "Helpful guides to get the most out of our platform" }, ], }, ]; return (

{/* Header */}

Notification Preferences

Choose what notifications you receive and how

{enabledCount} of {totalCount} enabled

{/* Channel Legend */}

Push

{/* Notification Categories */} {notificationCategories.map((category) => { const CategoryIcon = category.icon; return (

{category.title}

{category.items.map((item) => (

{item.label}

{item.description}

handleToggle(item.key, "email")} /> handleToggle(item.key, "push")} disabled={(item as { pushDisabled?: boolean }).pushDisabled} />

))}

); })} {/* Info Notice */}

About notifications

Critical security alerts and account notifications cannot be disabled. You can always update your preferences here.

{/* Actions */}

); }

React Account Block Notification Preferences

Notification Preferences

Activity Notifications

Orders & Purchases

Marketing & Updates

Installation

Related blocks you will also like

React Account Block Email Preferences

React Account Block Appearance Settings

React Account Block Privacy Settings

React Account Block Basic Information

React Account Block Security Settings

React Account Block Connected Accounts

Questions you might have

How should notifications be grouped?

Which notifications should be enabled by default?

How do I handle different notification channels?

Can users control notification frequency?

Should users see notification examples?

How do I add quick unsubscribe-all options?