Fraud Card

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useState } from "react";
5import { RxCross2 } from "react-icons/rx";
6import { GoDotFill } from "react-icons/go";
7import { TbCircleDotted } from "react-icons/tb";
8import { motion, Variants } from "motion/react";
9 
10type BlockedEmail = {
11  email: string;
12  time: string;
13};
14 
15type FraudCardProps = {
16  blockedEmails: BlockedEmail[];
17};
18 
19const FraudCard = ({ blockedEmails }: FraudCardProps) => {
20  const [hovered, setHovered] = useState(false);
21 
22  const parentvariant = {
23    open: {
24      transition: {
25        staggerChildren: 0.08,
26        delayChildren: 0.15,
27      },
28    },
29    close: {
30      transition: {
31        staggerChildren: 0.075,
32        delayChildren: 0.15,
33      },
34    },
35  };
36 
37  const emailvariant = {
38    open: {
39      opacity: 1,
40      filter: "blur(0px)",
41      y: 0,
42      transition: { duration: 0.3 },
43    },
44    close: {
45      opacity: 0,
46      filter: "blur(10px)",
47      y: 5,
48      transition: { duration: 0.3 },
49    },
50  };
51 
52  const iconvariant = {
53    open: {
54      opacity: 1,
55      scale: 1,
56      transition: { duration: 0.3 },
57    },
58    close: {
59      opacity: 0,
60      scale: 0.85,
61      transition: { duration: 0.3 },
62    },
63  };
64 
65  const timevariant = {
66    open: {
67      opacity: 1,
68      filter: "blur(0px)",
69      y: 0,
70      transition: { duration: 0.3 },
71    },
72    close: {
73      opacity: 0,
74      filter: "blur(5px)",
75      y: 10,
76      transition: { duration: 0.3 },
77    },
78  };
79 
80  const circlevariant: Variants = {
81    open: {
82      rotate: 360,
83      transition: {
84        ease: "linear",
85        duration: 2.5,
86        repeat: Number.POSITIVE_INFINITY,
87      },
88    },
89    close: {
90      rotate: 0,
91      transition: {
92        ease: "easeInOut",
93        duration: 0.1,
94        repeat: 0,
95      },
96    },
97  };
98 
99  return (
100    <motion.div
101      onClick={() => setHovered((prev) => !prev)}
102      onHoverStart={() => setHovered(true)}
103      onHoverEnd={() => setHovered(false)}
104      variants={parentvariant}
105      animate={hovered ? "open" : "close"}
106      initial="close"
107      className={cn(
108        "h-136 min-h-136 w-87.5 max-w-87.5",
109        "group overflow-hidden shadow-sm ring-1 shadow-black/10 ring-black/10 dark:bg-neutral-900 dark:ring-neutral-800",
110        "clbeam-container relative flex flex-col items-center",
111        "rounded-md bg-neutral-50 text-white dark:bg-neutral-900",
112      )}
113    >
114      <div className={cn("flex flex-col gap-2 px-4 pt-4")}>
115// … truncated