"use client" /** * @name Waitlist 05 * @description Countdown waitlist with launch timer. * Waitlist featuring a real-time countdown to launch. * * @slots waitlist, waitlist-container, waitlist-header, waitlist-icon, * waitlist-heading, waitlist-description, waitlist-countdown, * waitlist-countdown-item, waitlist-countdown-value, waitlist-countdown-label, * waitlist-form, waitlist-form-input, waitlist-form-button, * waitlist-stats, waitlist-stat, waitlist-stat-value, waitlist-stat-label * @variant countdown * * @registryDependencies button input * @dependencies lucide-react */ import * as React from "react" import { Mail, Users, Rocket } from "lucide-react" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Waitlist05Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Launch date */ launchDate?: Date /** Signup count */ signupCount?: number /** Form submit callback */ onSubmit?: (email: string) => void /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATE (stable reference outside component) // ============================================================================ const DEFAULT_LAUNCH_DATE = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000) // ============================================================================ // COMPONENT // ============================================================================ function Waitlist05({ heading = "Launching Soon", description = "Get notified when we launch and be among the first to experience the future of productivity.", launchDate: launchDateProp, signupCount = 2847, onSubmit, className, idBase = "waitlist-05", }: Waitlist05Props) { const [email, setEmail] = React.useState("") const [mounted, setMounted] = React.useState(false) const [timeLeft, setTimeLeft] = React.useState({ days: 0, hours: 0, minutes: 0, seconds: 0, }) const headingId = `${idBase}-heading` // Store launch date in ref to prevent reset on re-renders // Only update if the actual timestamp changes, not just the object reference const launchDateRef = React.useRef(launchDateProp ?? DEFAULT_LAUNCH_DATE) React.useEffect(() => { if (launchDateProp && launchDateProp.getTime() !== launchDateRef.current.getTime()) { launchDateRef.current = launchDateProp } }, [launchDateProp]) React.useEffect(() => { setMounted(true) const calculateTimeLeft = () => { const difference = launchDateRef.current.getTime() - Date.now() if (difference > 0) { setTimeLeft({ 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), }) } } calculateTimeLeft() const timer = setInterval(calculateTimeLeft, 1000) return () => clearInterval(timer) }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit?.(email) } const countdownItems = [ { value: timeLeft.days, label: "Days" }, { value: timeLeft.hours, label: "Hours" }, { value: timeLeft.minutes, label: "Minutes" }, { value: timeLeft.seconds, label: "Seconds" }, ] return (

{countdownItems.map((item, index) => (

{mounted ? String(item.value).padStart(2, "0") : "--"}

{item.label}

))}

Already joined

) } export default Waitlist05 export { Waitlist05, type Waitlist05Props }