homeio

1"use client";
2
3import { PopoverShell } from "@/modules/system/components/status-bar/popover-shell";
4import type { Notification } from "@/modules/system/components/status-bar/types";
5
6type NotificationPopoverProps = {
7  onClose: () => void;
8  notifications: Notification[];
9  onMarkAllRead: () => void;
10  onClearAll: () => void;
11  onViewAll?: () => void;
12};
13
14export function NotificationPopover({
15  onClose,
16  notifications,
17  onMarkAllRead,
18  onClearAll,
19  onViewAll,
20}: NotificationPopoverProps) {
21  return (
22    <PopoverShell onClose={onClose} className="w-80">
23      <div className="flex items-center justify-between p-3 border-b border-glass-border">
24        <span className="text-sm font-semibold text-foreground">
25          Notifications
26        </span>
27        <div className="flex items-center gap-3">
28          <button
29            onClick={onMarkAllRead}
30            className="text-xs text-primary hover:underline cursor-pointer"
31          >
32            Mark all read
33          </button>
34          <button
35            onClick={onClearAll}
36            className="text-xs text-primary hover:underline cursor-pointer"
37          >
38            Clear all
39          </button>
40        </div>
41      </div>
42      <div className="max-h-72 overflow-y-auto">
43        {notifications.length === 0 ? (
44          <div className="px-3 py-6 text-center text-xs text-muted-foreground">
45            No alerts right now
46          </div>
47        ) : (
48          notifications.map((item) => (
49            <div
50              key={item.id}
51              className={`flex items-start gap-3 px-3 py-3 border-b border-glass-border/50 last:border-0 hover:bg-secondary/40 transition-colors ${
52                !item.read ? "bg-primary/5" : ""
53              }`}
54            >
55              {!item.read && (
56                <span className="size-2 rounded-[var(--radius)] bg-primary shrink-0 mt-1.5" />
57              )}
58              <div className={`flex-1 min-w-0 ${item.read ? "ml-5" : ""}`}>
59                <div className="flex items-center justify-between gap-2">
60                  <span className="text-xs font-medium text-foreground truncate">
61                    {item.title}
62                  </span>
63                  <span className="text-xs text-muted-foreground whitespace-nowrap">
64                    {item.time}
65                  </span>
66                </div>
67                <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">
68                  {item.message}
69                </p>
70              </div>
71            </div>
72          ))
73        )}
74      </div>
75      <div className="border-t border-glass-border px-3 py-2">
76        <button onClick={onViewAll} className="text-xs text-primary hover:underline cursor-pointer">
77          View all notifications
78        </button>
79      </div>
80    </PopoverShell>
81  );
82}
83