"use client"; import { Bell, Check, CheckCheck, MessageSquare, MoreVertical, X, } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/new-york/ui/avatar"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/new-york/ui/dropdown-menu"; import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/registry/new-york/ui/empty"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; import { Separator } from "@/registry/new-york/ui/separator"; export type NotificationType = | "mention" | "ai_event" | "member_joined" | "file_shared" | "note_updated" | "project_updated" | "system"; export interface TeamNotification { id: string; type: NotificationType; title: string; message: string; user?: { id: string; name: string; avatar?: string; }; link?: string; read: boolean; timestamp: Date; metadata?: Record; } export interface TeamNotificationsProps { notifications?: TeamNotification[]; onMarkAsRead?: (notificationId: string) => Promise; onMarkAllAsRead?: () => Promise; onDelete?: (notificationId: string) => Promise; onClearAll?: () => Promise; className?: string; showFilters?: boolean; unreadCount?: number; } function formatRelativeTime(date: Date): string { const now = Date.now(); const diff = now - date.getTime(); const minutes = Math.floor(diff / 60_000); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); if (minutes < 1) return "Just now"; if (minutes < 60) return `${minutes}m ago`; if (hours < 24) return `${hours}h ago`; if (days < 7) return `${days}d ago`; return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", }).format(date); } function getNotificationIcon(type: NotificationType) { switch (type) { case "mention": return MessageSquare; case "ai_event": return Bell; default: return Bell; } } function getInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } export default function TeamNotifications({ notifications = [], onMarkAsRead, onMarkAllAsRead, onDelete, onClearAll, className, showFilters = true, unreadCount, }: TeamNotificationsProps) { const [typeFilter, setTypeFilter] = useState("all"); const [statusFilter, setStatusFilter] = useState("all"); const filteredNotifications = notifications.filter((notification) => { const matchesType = typeFilter === "all" || notification.type === typeFilter; const matchesStatus = statusFilter === "all" || (statusFilter === "unread" && !notification.read) || (statusFilter === "read" && notification.read); return matchesType && matchesStatus; }); const unreadNotifications = filteredNotifications.filter((n) => !n.read); const displayUnreadCount = unreadCount ?? unreadNotifications.length; return (

Notifications {displayUnreadCount > 0 && ( {displayUnreadCount} unread )} {displayUnreadCount === 0 && "All caught up!"}

{onMarkAllAsRead && displayUnreadCount > 0 && ( )} {onClearAll && ( )}

{showFilters && (

)}

{filteredNotifications.length === 0 ? ( {typeFilter !== "all" || statusFilter !== "all" ? "No notifications match your filters" : "No notifications yet"} ) : (

{filteredNotifications.map((notification, idx) => { const Icon = getNotificationIcon(notification.type); const isFirst = idx === 0; const isLast = idx === filteredNotifications.length - 1; return (

{notification.user ? ( {getInitials(notification.user.name)} ) : ( )}

{notification.title} {!notification.read && (

)} {notification.type}

{notification.message}

{formatRelativeTime(notification.timestamp)}

{!notification.read && onMarkAsRead && ( onMarkAsRead(notification.id)} > Mark as read )} {notification.link && ( View )} {onDelete && ( <> onDelete(notification.id)} variant="destructive" > Delete )}

{idx < filteredNotifications.length - 1 && }

); })}

)} ); }

Example Usage