"use client" import * as React from "react" import { cn } from "@/lib/utils" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, } from "@/components/ui/sheet" import { Button } from "@/components/ui/button" import { UserAvatar } from "@/components/shared/user-avatar" /** A single notification displayed in the panel. */ export interface NotificationItem { /** Unique identifier. */ id: string /** Notification title or headline. */ title: string /** Supporting description. */ description?: string /** ISO timestamp string. */ timestamp: string /** Whether the notification has been read. */ read?: boolean /** Actor name for the avatar. */ user?: string /** Actor avatar URL. */ avatarUrl?: string /** Lucide icon element shown when no user context is needed. */ icon?: React.ReactNode } export interface NotificationPanelProps { /** Notifications displayed in the panel. */ items: NotificationItem[] /** Controlled open state. */ open: boolean /** Called when the panel should close. */ onOpenChange: (open: boolean) => void /** Called when the "Mark all read" button is clicked. */ onMarkAllRead?: () => void /** Called when a single notification is clicked. */ onItemClick?: (item: NotificationItem) => void /** Panel title. */ title?: string className?: string } /** * Slide-over notification panel built on the Sheet primitive. * Displays a list of notifications with read/unread state, * avatars or icons, and a "mark all read" action. * * @example * ```tsx * markAllAsRead()} * /> * ``` */ export function NotificationPanel({ items, open, onOpenChange, onMarkAllRead, onItemClick, title = "Notifications", className, }: NotificationPanelProps) { const unreadCount = items.filter((n) => !n.read).length return (

{title} {unreadCount > 0 ? `${unreadCount} unread notification${unreadCount === 1 ? "" : "s"}` : "You're all caught up"}

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

{/* Notification list */}

{items.length === 0 ? (

No notifications yet

) : (

onItemClick(item) })} className={cn( "flex w-full gap-3 px-6 py-4 text-left transition-colors", onItemClick && "hover:bg-accent", !item.read && "bg-brand/5" )} > {/* Avatar or icon */}
{item.user ? ( ) : item.icon ? (
{item.icon}
) : (
)}
{/* Content */}

{item.title}
{item.description && (
{item.description}
)} {formatNotificationTime(item.timestamp)}
{/* Unread dot */} {!item.read && (

)}

)}

) } /** Formats an ISO timestamp for notification display. */ function formatNotificationTime(iso: string): string { const now = Date.now() const then = new Date(iso).getTime() const diffMs = now - then const diffMin = Math.floor(diffMs / 60_000) const diffHr = Math.floor(diffMin / 60) const diffDay = Math.floor(diffHr / 24) if (diffMin < 1) return "just now" if (diffMin < 60) return `${diffMin}m ago` if (diffHr < 24) return `${diffHr}h ago` if (diffDay < 7) return `${diffDay}d ago` return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format( new Date(iso) ) }

Prop	Type	Required	Description
`items`	`NotificationItem[]`	yes	Notifications to display.
`open`	`boolean`	yes	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	yes	Open state change handler.