NotificationPanel

1"use client";
2
3import { Card } from "@/components/ui/card";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { ScrollArea } from "@/components/ui/scroll-area";
7import { Bell, MessageSquare, UserPlus, Star, AlertCircle, Package, Check, X } from "lucide-react";
8import { useState } from "react";
9
10interface Notification {
11  id: string;
12  icon: React.ReactNode;
13  title: string;
14  description: string;
15  time: string;
16  unread: boolean;
17}
18
19export default function NotificationPanel() {
20  const [notifications, setNotifications] = useState<Notification[]>([
21    { id: "1", icon: <MessageSquare className="w-4 h-4 text-blue-500" />, title: "New message", description: "Alice sent you a message", time: "2m ago", unread: true },
22    { id: "2", icon: <UserPlus className="w-4 h-4 text-green-500" />, title: "New follower", description: "Bob started following you", time: "15m ago", unread: true },
23    { id: "3", icon: <Star className="w-4 h-4 text-yellow-500" />, title: "Post liked", description: "Carol liked your post", time: "1h ago", unread: true },
24    { id: "4", icon: <AlertCircle className="w-4 h-4 text-orange-500" />, title: "System alert", description: "Scheduled maintenance tonight", time: "3h ago", unread: false },
25    { id: "5", icon: <Package className="w-4 h-4 text-purple-500" />, title: "Order shipped", description: "Your order #1234 is on the way", time: "5h ago", unread: false },
26    { id: "6", icon: <Bell className="w-4 h-4 text-gray-500" />, title: "Reminder", description: "Meeting at 3 PM today", time: "1d ago", unread: false },
27  ]);
28
29  const unreadCount = notifications.filter(n => n.unread).length;
30
31  const markAllRead = () => {
32    setNotifications(notifications.map(n => ({ ...n, unread: false })));
33  };
34
35  return (
36    <Card className="w-full max-w-md">
37      <div className="p-4 border-b flex items-center justify-between">
38        <div className="flex items-center gap-2">
39          <h3 className="font-semibold">Notifications</h3>
40          {unreadCount > 0 && <Badge variant="secondary">{unreadCount}</Badge>}
41        </div>
42        <Button variant="ghost" size="sm" onClick={markAllRead} disabled={unreadCount === 0}>
43          Mark all read
44        </Button>
45      </div>
46      <ScrollArea className="h-96">
47        <div className="p-2">
48          {notifications.map((notification) => (
49            <div
50              key={notification.id}
51              className={`flex gap-3 p-3 rounded-lg hover:bg-muted/50 transition-colors cursor-pointer ${notification.unread ? "bg-muted/30" : ""}`}
52            >
53              <div className="flex-shrink-0 mt-0.5">
54                {notification.icon}
55              </div>
56              <div className="flex-1 min-w-0">
57                <div className="flex items-center gap-2">
58                  <p className="font-medium text-sm">{notification.title}</p>
59                  {notification.unread && <div className="w-2 h-2 rounded-full bg-blue-500" />}
60                </div>
61                <p className="text-sm text-muted-foreground truncate">{notification.description}</p>
62                <p className="text-xs text-muted-foreground mt-1">{notification.time}</p>
63              </div>
64            </div>
65          ))}
66        </div>
67      </ScrollArea>
68    </Card>
69  );
70}