Subscribe Button

1"use client";
2import { BellIcon } from "lucide-react";
3import { useState, useEffect } from "react";
4import { AnimatePresence, motion } from "motion/react";
5import { useTheme } from "next-themes";
6 
7interface SubscribeButtonProps {
8  onClick?: () => void;
9  text?: string;
10  className?: string;
11}
12 
13export const SubscribeButton: React.FC<SubscribeButtonProps> = ({
14  onClick,
15  text = "Subscribe",
16  className = "",
17}) => {
18  const [isSubscribed, setIsSubscribed] = useState(false);
19  const [isAnimating, setIsAnimating] = useState(false);
20  const { theme, systemTheme } = useTheme();
21 
22  useEffect(() => {
23    if (isAnimating) {
24      const timer = setTimeout(() => {
25        setIsAnimating(false);
26      }, 1200);
27      return () => clearTimeout(timer);
28    }
29  }, [isAnimating]);
30 
31  const handleClick = () => {
32    if (!isSubscribed) {
33      setIsAnimating(true);
34    }
35    setIsSubscribed(!isSubscribed);
36    if (onClick) {
37      onClick();
38    }
39  };
40 
41  const createCircles = (count = 20) => {
42    return Array.from({ length: count }, (_, i) => {
43      const angle = (i / count) * 2 * Math.PI;
44      const radius = Math.random() * 100 + 50;
45      const endX = Math.cos(angle) * radius;
46      const endY = Math.sin(angle) * radius;
47 
48      const shapes = ["circle", "star"];
49      const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
50 
51      return (
52        <motion.div
53          key={i}
54          className={`absolute ${
55            randomShape === "circle" ? "rounded-full" : ""
56          }`}
57          initial={{
58            opacity: 0,
59            scale: 0,
60            x: "-50%",
61            y: "-50%",
62            left: "50%",
63            top: "50%",
64            rotate: 0,
65          }}
66          animate={{
67            opacity: [0, 1, 0],
68            scale: [0, Math.random() * 0.5 + 0.7, 0],
69            x: ["-50%", `calc(${endX}px - 50%)`],
70            y: ["-50%", `calc(${endY}px - 50%)`],
71            rotate: [0, Math.random() * 360],
72          }}
73          transition={{
74            duration: 1,
75            delay: Math.random() * 0.1,
76            ease: "easeInOut",
77          }}
78          style={{
79            width: `${Math.random() * 2 + 10}px`,
80            height: `${Math.random() * 2 + 10}px`,
81            backgroundColor: `hsl(${Math.random() * 360}, 100%, 60%)`,
82            clipPath:
83              randomShape === "star"
84                ? "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"
85                : "",
86// … truncated