{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comingsoon1",
  "title": "Countdown Timer Launch",
  "description": "Coming soon section with a live countdown timer showing days, hours, minutes, and seconds until launch. Perfect for product launches, event announcements, or building anticipation for new features.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/comingsoon1/comingsoon1.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TimeLeft {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n}\n\ninterface ComingSoon1Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  launchDate?: string;\n  showCountdown?: boolean;\n  className?: string;\n}\n\nexport const comingsoon1Demo: ComingSoon1Props = {\n  badge: { label: \"Coming Soon\", variant: \"secondary\" },\n  heading: \"Something amazing is on the way\",\n  description:\n    \"We're working hard to bring you something special. Stay tuned for the big reveal.\",\n  launchDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(), // 30 days from now\n  showCountdown: true,\n};\n\nfunction useCountdown(targetDate: string | undefined): TimeLeft {\n  const [timeLeft, setTimeLeft] = useState<TimeLeft>({\n    days: 0,\n    hours: 0,\n    minutes: 0,\n    seconds: 0,\n  });\n\n  useEffect(() => {\n    if (!targetDate) return;\n\n    const calculateTimeLeft = () => {\n      const difference = new Date(targetDate).getTime() - new Date().getTime();\n\n      if (difference > 0) {\n        setTimeLeft({\n          days: Math.floor(difference / (1000 * 60 * 60 * 24)),\n          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),\n          minutes: Math.floor((difference / 1000 / 60) % 60),\n          seconds: Math.floor((difference / 1000) % 60),\n        });\n      } else {\n        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });\n      }\n    };\n\n    calculateTimeLeft();\n    const timer = setInterval(calculateTimeLeft, 1000);\n\n    return () => clearInterval(timer);\n  }, [targetDate]);\n\n  return timeLeft;\n}\n\nexport function ComingSoon1({\n  badge,\n  heading,\n  description,\n  launchDate,\n  showCountdown = true,\n  className,\n}: ComingSoon1Props) {\n  const timeLeft = useCountdown(launchDate);\n\n  const countdownItems = [\n    { label: \"Days\", value: timeLeft.days },\n    { label: \"Hours\", value: timeLeft.hours },\n    { label: \"Minutes\", value: timeLeft.minutes },\n    { label: \"Seconds\", value: timeLeft.seconds },\n  ];\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-4xl px-4 md:px-6\">\n        <div className=\"flex flex-col items-center text-center gap-6 md:gap-8\">\n          {badge && (\n            <div>\n              <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n            </div>\n          )}\n\n          {heading && (\n            <h2 className=\"text-4xl md:text-5xl lg:text-6xl font-bold text-balance max-w-4xl\">\n              {heading}\n            </h2>\n          )}\n\n          {description && (\n            <p className=\"text-lg md:text-xl text-balance max-w-2xl text-muted-foreground\">\n              {description}\n            </p>\n          )}\n\n          {/* Countdown Timer */}\n          {showCountdown && launchDate && (\n            <div className=\"flex flex-wrap justify-center gap-4 md:gap-6 my-4\">\n              {countdownItems.map((item) => (\n                <div\n                  key={item.label}\n                  className=\"flex flex-col items-center p-4 md:p-6 rounded-xl bg-muted min-w-[80px] md:min-w-[100px]\"\n                >\n                  <span className=\"text-3xl md:text-5xl font-bold tabular-nums\">\n                    {String(item.value).padStart(2, \"0\")}\n                  </span>\n                  <span className=\"text-xs md:text-sm uppercase tracking-wider mt-1 text-muted-foreground\">\n                    {item.label}\n                  </span>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/comingsoon1.tsx"
    }
  ],
  "type": "registry:block"
}