"use client" /** * @name List View 07 * @description A compact notification center with grouping and actions. * Perfect for notification feeds, inbox views, or message centers. * * @slots list-view, list-view-container, list-view-header, list-view-heading, * list-view-actions, list-view-mark-all, list-view-settings, list-view-tabs, * list-view-tab, list-view-group, list-view-group-header, list-view-group-title, * list-view-list, list-view-item, list-view-icon, list-view-content, * list-view-title, list-view-description, list-view-time, list-view-item-actions, * list-view-item-action * @variant notification-center * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { Settings, Check, User, MessageCircle, Heart, AlertTriangle, Info, X, } from "lucide-react" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type NotificationType = "mention" | "comment" | "like" | "alert" | "info" type NotificationTab = "all" | "unread" | "mentions" interface Notification { id: string type: NotificationType title: string description?: string time: string read?: boolean group: string } interface ListView07Props { heading?: string notifications?: Notification[] activeTab?: NotificationTab onTabChange?: (tab: NotificationTab) => void onNotificationClick?: (id: string) => void onDismiss?: (id: string) => void onMarkAllRead?: () => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultNotifications: Notification[] = [ { id: "notif-1", type: "mention", title: "@you was mentioned", description: "Sarah mentioned you in a comment on Project Alpha", time: "2m ago", group: "Today", read: false }, { id: "notif-2", type: "comment", title: "New comment", description: "Mike commented on your post", time: "15m ago", group: "Today", read: false }, { id: "notif-3", type: "like", title: "Your post was liked", description: "Emma and 5 others liked your update", time: "1h ago", group: "Today", read: true }, { id: "notif-4", type: "alert", title: "Action required", description: "Your subscription expires in 3 days", time: "3h ago", group: "Today", read: false }, { id: "notif-5", type: "info", title: "New feature available", description: "Check out the new dashboard analytics", time: "Yesterday", group: "Yesterday", read: true }, { id: "notif-6", type: "mention", title: "@you was mentioned", description: "Alex mentioned you in Team Chat", time: "Yesterday", group: "Yesterday", read: true }, ] const typeConfig: Record = { mention: { icon: User, color: "bg-blue-500" }, comment: { icon: MessageCircle, color: "bg-purple-500" }, like: { icon: Heart, color: "bg-red-500" }, alert: { icon: AlertTriangle, color: "bg-amber-500" }, info: { icon: Info, color: "bg-green-500" }, } const tabs: { value: NotificationTab; label: string }[] = [ { value: "all", label: "All" }, { value: "unread", label: "Unread" }, { value: "mentions", label: "Mentions" }, ] // ============================================================================ // COMPONENT // ============================================================================ function ListView07({ heading = "Notifications", notifications = defaultNotifications, activeTab = "all", onTabChange, onNotificationClick, onDismiss, onMarkAllRead, className, idBase = "list-view-07", }: ListView07Props) { const headingId = `${idBase}-heading` const filteredNotifications = React.useMemo(() => { switch (activeTab) { case "unread": return notifications.filter((n) => !n.read) case "mentions": return notifications.filter((n) => n.type === "mention") default: return notifications } }, [notifications, activeTab]) // Group notifications by date const groupedNotifications = React.useMemo(() => { const groups: Record = {} filteredNotifications.forEach((n) => { if (!groups[n.group]) groups[n.group] = [] groups[n.group].push(n) }) return groups }, [filteredNotifications]) const unreadCount = notifications.filter((n) => !n.read).length return (

{/* Header */}

{heading}

{unreadCount > 0 && ( {unreadCount} )}

{/* Tabs */}

{tabs.map((tab) => ( ))}

{/* Notification Groups */} {Object.entries(groupedNotifications).map(([group, items]) => (

{group}

{items.map((notification) => { const config = typeConfig[notification.type] const Icon = config.icon return (

onNotificationClick?.(notification.id)} > {/* Icon */}

{/* Content */}

{notification.title}

{notification.description && (

{notification.description}

)} {notification.time}

{/* Actions */}

) })}

))}

) } export default ListView07 export { ListView07, type ListView07Props }