"use client"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { ComponentProps, useEffect, useRef, useState } from "react"; const countdownButtonVariants = cva( "relative overflow-hidden select-none rounded-md transition-all duration-200 ease-out active:scale-[0.98]", { variants: { variant: { primary: "bg-black text-white", danger: "bg-red-600 text-white", ghost: "bg-transparent text-black border border-black/20", }, }, defaultVariants: { variant: "primary", }, }, ); type CountdownButtonProps = ComponentProps<"button"> & VariantProps & { className?: string; seconds?: number; onComplete?: () => void; }; export const CountdownButton = ({ className, children, seconds = 3, onComplete, variant, ...props }: CountdownButtonProps) => { const [count, setCount] = useState(null); const [progress, setProgress] = useState(0); const intervalRef = useRef(null); const timeoutRef = useRef(null); const activeRef = useRef(false); const clear = () => { if (intervalRef.current) clearInterval(intervalRef.current); if (timeoutRef.current) clearTimeout(timeoutRef.current); intervalRef.current = null; timeoutRef.current = null; activeRef.current = false; setCount(null); setProgress(0); }; const start = () => { if (activeRef.current) return; activeRef.current = true; setCount(seconds); setProgress(0); const startTime = Date.now(); intervalRef.current = setInterval(() => { const elapsed = Date.now() - startTime; const pct = Math.min(elapsed / (seconds * 1000), 1); const remaining = Math.ceil((1 - pct) * seconds); setProgress(pct); setCount(remaining > 0 ? remaining : null); }, 50); timeoutRef.current = setTimeout(() => { onComplete?.(); clear(); }, seconds * 1000); }; const cancel = () => { if (!activeRef.current) return; clear(); }; useEffect(() => { return () => clear(); }, []); const isActive = count !== null; return ( ); };

Installation & source

Props