Stack Ripple

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useState } from "react";
5import { MdKeyboardArrowDown } from "react-icons/md";
6import { FaDollarSign, FaUser } from "react-icons/fa6";
7import { BiSolidMessageRounded } from "react-icons/bi";
8import { AnimatePresence, motion, Variants } from "motion/react";
9 
10type StackCardItem = {
11  id: string;
12  icon: React.ReactNode;
13  title: string;
14  description: string;
15  time: string;
16};
17 
18type StackRippleProps = {
19  stackCardItems?: StackCardItem[];
20};
21 
22const stackItems: StackCardItem[] = [
23  {
24    id: "item1",
25    icon: (
26      <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#FF3D71]">
27        <BiSolidMessageRounded className="size-5 text-neutral-200 dark:text-neutral-300" />
28      </span>
29    ),
30    title: "New Message",
31    description: "Forge UI",
32    time: "3 hrs ago",
33  },
34  {
35    id: "item2",
36    icon: (
37      <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-400 dark:bg-yellow-500">
38        <FaUser className="size-5 text-neutral-100 dark:text-neutral-200" />
39      </span>
40    ),
41    title: "User Signed Up",
42    description: "Forge UI",
43    time: "7 hrs ago",
44  },
45  {
46    id: "item3",
47    icon: (
48      <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-green-500">
49        <FaDollarSign className="size-5 text-neutral-200 dark:text-neutral-100" />
50      </span>
51    ),
52    title: "Billing Reminder",
53    description: "Forge UI",
54    time: "9 hrs ago",
55  },
56];
57 
58const StackRipple = ({ stackCardItems = stackItems }: StackRippleProps) => {
59  const [isOpen, setIsOpen] = useState(false);
60 
61  const popup1Variant: Variants = {
62    open: {
63      y: -55,
64      transition: {
65        type: "spring",
66        damping: 15,
67        stiffness: 200,
68        mass: 1,
69        bounce: 0.3,
70        delay: 0.13,
71      },
72    },
73    close: {
74      y: 0,
75      transition: {
76        type: "spring",
77        damping: 15,
78        stiffness: 200,
79        mass: 1,
80        bounce: 0.3,
81        delay: 0.13,
82      },
83    },
84  };
85  const popup2Variant: Variants = {
86    open: {
87      scale: 1,
88      transition: {
89        type: "spring",
90        damping: 15,
91        stiffness: 200,
92        mass: 1,
93        bounce: 0.3,
94        delay: 0.13,
95      },
96    },
97    close: {
98      scale: 0.95,
99      transition: {
100        type: "spring",
101        damping: 15,
102        stiffness: 200,
103        mass: 1,
104        bounce: 0.3,
105        delay: 0.13,
106      },
107    },
108  };
109// … truncated