"use client" // required for: useState, useEffect (countdown timer) /** * @name CTA 07 * @description A CTA with countdown timer for urgency and limited-time offers. * Great for promotions, launches, and time-sensitive campaigns. * * @slots cta, cta-container, cta-content, cta-badge, cta-heading, * cta-description, cta-countdown, cta-countdown-item, * cta-countdown-value, cta-countdown-label, cta-button * @variant countdown * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface CtaConfig { /** Button text */ text: string /** Link destination */ href: string } interface CountdownItemConfig { /** Unique identifier for list key */ id: string /** Countdown value */ value: number /** Countdown label */ label: string } interface Cta07Props { /** Badge text */ badge?: string /** Main heading */ heading?: string /** Supporting description */ description?: string /** Target date for countdown */ targetDate?: Date /** CTA button configuration */ cta?: CtaConfig /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // HOOKS // ============================================================================ function useCountdown(targetDate: Date) { const calculateTimeLeft = React.useCallback(() => { const difference = targetDate.getTime() - new Date().getTime() if (difference <= 0) { return { days: 0, hours: 0, minutes: 0, seconds: 0 } } return { days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), } }, [targetDate]) const [timeLeft, setTimeLeft] = React.useState(calculateTimeLeft) React.useEffect(() => { const timer = setInterval(() => { setTimeLeft(calculateTimeLeft()) }, 1000) return () => clearInterval(timer) }, [calculateTimeLeft]) return timeLeft } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_CTA: CtaConfig = { text: "Claim your discount", href: "#", } // ============================================================================ // COMPONENT // ============================================================================ function Cta07({ badge = "Limited Time Offer", heading = "Don't miss out on this deal", description = "Get 50% off your first year. This offer expires soon.", targetDate = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), // 3 days from now cta = DEFAULT_CTA, className, idBase, }: Cta07Props) { const timeLeft = useCountdown(targetDate) const headingId = `${idBase ?? "cta-07"}-heading` const countdownItems: CountdownItemConfig[] = [ { id: "countdown-days", value: timeLeft.days, label: "Days" }, { id: "countdown-hours", value: timeLeft.hours, label: "Hours" }, { id: "countdown-minutes", value: timeLeft.minutes, label: "Minutes" }, { id: "countdown-seconds", value: timeLeft.seconds, label: "Seconds" }, ] return (

{badge && ( {badge} )}

{heading}

{description && (

{description}

)} {/* Countdown */}

{countdownItems.map((item) => (

{String(item.value).padStart(2, "0")}

{item.label}

))}

{/* CTA */} {cta && ( {cta.text} )}

) } export default Cta07 export { Cta07, type Cta07Props, type CtaConfig }