"use client"; import { useState, useRef, useEffect } from "react"; import { Bell, BellRing } from "lucide-react"; import { twMerge } from "tailwind-merge"; export const cn = (...classes) => twMerge(classes.filter(Boolean).join(" ")); export default function SubscribeButton({ defaultSubscribed = false, duration = 5000, size = "md", onSubscribe, className, ...props }) { const [subscribed, setSubscribed] = useState(defaultSubscribed); const [ringing, setRinging] = useState(false); const resetTimer = useRef(null); const ringTimer = useRef(null); useEffect(() => { return () => { clearTimeout(resetTimer.current); clearTimeout(ringTimer.current); }; }, []); const sizes = { sm: "px-4 py-2 text-xs", md: "px-6 py-3 text-sm", lg: "px-8 py-4 text-base", }; const handleClick = () => { if (!subscribed) { setSubscribed(true); setRinging(true); onSubscribe?.(); resetTimer.current = setTimeout(() => { setSubscribed(false); }, duration); ringTimer.current = setTimeout(() => { setRinging(false); }, duration - 1000); } }; return ( <> ); }

Components

Subscribe Button

Installation

Tailwind Setup