Notification Panel

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useState } from "react";
5import { PiBell } from "react-icons/pi";
6import { FiRefreshCcw } from "react-icons/fi";
7import { FaTools, FaUserFriends } from "react-icons/fa";
8import { MdKeyboardArrowDown, MdSecurity } from "react-icons/md";
9import { motion, AnimatePresence, type Variants } from "motion/react";
10 
11type Notification = {
12  id: string;
13  title: string;
14  description: string;
15  timestamp: string;
16  icon: React.ReactNode;
17};
18 
19type NotificationPanelProps = {
20  notifications?: Notification[];
21};
22 
23const defaultNotifications: Notification[] = [
24  {
25    id: "maintenance",
26    title: "Scheduled Downtime",
27    description: "Servers will be offline tonight at 11 PM.",
28    timestamp: "5 min ago",
29    icon: <FaTools className="h-5 w-5" />,
30  },
31  {
32    id: "update",
33    title: "System Update",
34    description: "Your app was updated to v2.3.1.",
35    timestamp: "20 min ago",
36    icon: <FiRefreshCcw className="h-5 w-5" />,
37  },
38  {
39    id: "invite",
40    title: "New Invite!",
41    description: "You've been added to the Design Team.",
42    timestamp: "1 hour ago",
43    icon: <FaUserFriends className="h-5 w-5" />,
44  },
45  {
46    id: "alert",
47    title: "Security Alert",
48    description: "Unrecognized login attempt detected.",
49    timestamp: "6 hours ago",
50    icon: <MdSecurity className="h-5 w-5" />,
51  },
52];
53 
54const NotificationPanel = ({
55  notifications = defaultNotifications,
56}: NotificationPanelProps) => {
57  const [isOpen, setIsOpen] = useState(false);
58 
59  const itemVariant: Variants = {
60    open: {
61      opacity: 1,
62      y: 0,
63      filter: "blur(0px)",
64      transition: {
65        duration: 0.4,
66        ease: "easeInOut",
67      },
68    },
69    close: {
70      opacity: 0,
71      y: -5,
72      filter: "blur(5px)",
73      transition: {
74        duration: 0.4,
75        ease: "easeInOut",
76      },
77    },
78  };
79 
80  return (
81    <div
82      className={cn(
83        "mx-auto w-full max-w-105 rounded-lg p-1.5",
84        "border border-neutral-200/70 dark:border-neutral-900/70",
85      )}
86    >
87      <div
88        className={cn(
89          "divide-y divide-neutral-200/80 dark:divide-neutral-800/50",
90          "ring-1 ring-black/10 dark:ring-neutral-800/60",
91          "overflow-hidden rounded-[8px] shadow-sm shadow-black/8",
92          "bg-linear-to-r from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-950",
93        )}
94      >
95        <motion.div
96          className={cn("flex min-h-16.75 items-center justify-between px-4")}
97// … truncated