"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Bell, CheckCheck, Settings, Filter, Mail, MailOpen, Trash2 } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { Separator } from "@/components/ui/separator" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem } from "@/lib/animations" const allNotifications = [ { id: 1, title: "Order shipped", message: "Your order ORD-8765 has been shipped.", time: "2m ago", read: false, category: "orders" }, { id: 2, title: "Payment received", message: "Payment of $89.99 was successful.", time: "1h ago", read: false, category: "payments" }, { id: 3, title: "New feature available", message: "Check out our new dashboard.", time: "3h ago", read: true, category: "updates" }, { id: 4, title: "Security alert", message: "New login from Chrome on Windows.", time: "1d ago", read: false, category: "security" }, { id: 5, title: "Promotion ends soon", message: "Your 20% discount expires in 2 days.", time: "2d ago", read: true, category: "promotions" }, { id: 6, title: "Review requested", message: "Rate your recent purchase.", time: "3d ago", read: true, category: "orders" }, ] const tabs = ["All", "Unread", "Orders", "Payments", "Security"] export default function Notifications() { const [notifications, setNotifications] = useState(allNotifications) const [activeTab, setActiveTab] = useState("All") const filtered = notifications.filter((n) => { if (activeTab === "All") return true if (activeTab === "Unread") return !n.read return n.category === activeTab.toLowerCase() }) const unreadCount = notifications.filter((n) => !n.read).length const markAllRead = () => { setNotifications((prev) => prev.map((n) => ({ ...n, read: true }))) } const dismissNotification = (id: number) => { setNotifications((prev) => prev.filter((n) => n.id !== id)) } return (

Notifications

Stay updated with the latest activity.

{tabs.map((tab) => ( {tab} {tab === "Unread" && unreadCount > 0 && ( {unreadCount} )} ))} {tabs.map((tab) => ( {filtered.map((n) => (

{n.read ? ( ) : ( )}

{n.title}

{!n.read && }

{n.message}

{n.time}

))} {filtered.length === 0 && (

No notifications.

)} ))}

) }