Notification Center

1"use client";
2import { cn } from "@/lib/utils";
3import React, { useState } from "react";
4import { MdMarkunread } from "react-icons/md";
5import { RiNetflixFill } from "react-icons/ri";
6import { AiFillSpotify } from "react-icons/ai";
7import { motion, Variants } from "motion/react";
8import { FaHeadphones, FaXTwitter } from "react-icons/fa6";
9import { FaPhoneAlt, FaPinterest, FaSnapchatGhost } from "react-icons/fa";
10 
11type NotificationCardProps = {
12  cardTitle?: string;
13  cardDescription?: string;
14  notificationTitle?: string;
15  notificationDescription?: string;
16  notificationTime?: string;
17};
18 
19const NotificationCenter = ({
20  cardTitle = "Real-time payment alerts",
21  cardDescription = "Get instant updates for every successful Stripe transaction processed through your app.",
22  notificationTitle = "Stripe",
23  notificationDescription = "You received a payment of $99.00",
24  notificationTime = "2h ago",
25}: NotificationCardProps) => {
26  const [isHovered, setIsHovered] = useState(false);
27 
28  const phoneVariant: Variants = {
29    open: {
30      y: -36,
31      transition: {
32        duration: 0.3,
33        ease: "easeInOut",
34      },
35    },
36    close: {
37      y: 0,
38      transition: {
39        duration: 0.2,
40        ease: "easeInOut",
41      },
42    },
43  };
44 
45  const notificationVariant: Variants = {
46    open: {
47      y: 48,
48      scale: 1,
49      filter: "blur(0px)",
50      transition: {
51        duration: 0.3,
52        ease: "easeInOut",
53        delay: 0.1,
54      },
55    },
56    close: {
57      y: -72,
58      scale: 0.75,
59      filter: "blur(10px)",
60      transition: {
61        duration: 0.3,
62        ease: "easeInOut",
63      },
64    },
65  };
66 
67  const lockVariant: Variants = {
68    open: {
69      backgroundColor: "#22d3ee",
70      transition: {
71        duration: 0.1,
72        ease: "easeInOut",
73      },
74    },
75    close: {
76      backgroundColor: "#262626",
77      transition: {
78        duration: 0.1,
79        ease: "easeInOut",
80      },
81    },
82  };
83 
84  const lockLightVariant: Variants = {
85    open: {
86      backgroundColor: "#22d3ee",
87      transition: {
88        duration: 0.1,
89        ease: "easeInOut",
90      },
91    },
92    close: {
93      backgroundColor: "#d5d5d5",
94      transition: {
95        duration: 0.1,
96        ease: "easeInOut",
97      },
98    },
99  };
100 
101  const parentVariant: Variants = {
102    open: {
103      transition: {
104        staggerChildren: 0.08,
105        delayChildren: 0.15,
106      },
107    },
108    close: {
109      transition: {
110        staggerChildren: 0.075,
111        delayChildren: 0.15,
112      },
113// … truncated