{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "coming-soon-3",
  "title": "Launch Countdown Timer",
  "description": "Coming soon page with a live countdown timer in days, hours, minutes, and seconds tiles above an email notify form.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "input"
  ],
  "files": [
    {
      "path": "registry/blocks/coming-soon/3/coming-soon-block.tsx",
      "content": "\"use client\"\n\nimport { Fragment, useEffect, useState } from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst COUNTDOWN_DURATION_MS =\n  14 * 24 * 60 * 60 * 1000 + 6 * 60 * 60 * 1000 + 42 * 60 * 1000 + 18 * 1000\n\ntype TimeLeft = {\n  days: number\n  hours: number\n  minutes: number\n  seconds: number\n}\n\nfunction getTimeLeft(diffMs: number): TimeLeft {\n  const diff = Math.max(0, diffMs)\n  const totalSeconds = Math.floor(diff / 1000)\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  }\n}\n\nfunction pad(value: number): string {\n  return value.toString().padStart(2, \"0\")\n}\n\nconst tiles = [\n  { key: \"days\", label: \"Days\" },\n  { key: \"hours\", label: \"Hours\" },\n  { key: \"minutes\", label: \"Minutes\" },\n  { key: \"seconds\", label: \"Seconds\" },\n] as const\n\nexport default function ComingSoonBlock() {\n  const [timeLeft, setTimeLeft] = useState<TimeLeft>(() =>\n    getTimeLeft(COUNTDOWN_DURATION_MS)\n  )\n\n  useEffect(() => {\n    const deadline = Date.now() + COUNTDOWN_DURATION_MS\n    const interval = setInterval(() => {\n      setTimeLeft(getTimeLeft(deadline - Date.now()))\n    }, 1000)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <section className=\"flex min-h-svh w-full flex-col items-center justify-center gap-8 bg-background px-6 py-12 text-center text-foreground\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <span className=\"flex items-center gap-2 rounded-md border border-border bg-muted/50 px-2.5 py-0.5 text-xs font-medium text-muted-foreground\">\n          <IconPlaceholder\n            lucide=\"Rocket\"\n            tabler=\"IconRocket\"\n            hugeicons=\"RocketIcon\"\n            phosphor=\"Rocket\"\n            remixicon=\"RiRocket2Line\"\n            className=\"size-3.5\"\n            aria-hidden=\"true\"\n          />\n          Coming Soon\n        </span>\n        <h1 className=\"font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n          The countdown to our biggest launch yet\n        </h1>\n        <p className=\"max-w-md text-sm text-muted-foreground sm:text-base\">\n          We go live the moment the timer hits zero. Drop your email and we will\n          make sure you are first through the door.\n        </p>\n      </div>\n\n      <div className=\"flex items-center justify-center gap-2 sm:gap-3\">\n        {tiles.map((tile, index) => (\n          <Fragment key={tile.key}>\n            <div className=\"flex w-16 flex-col overflow-hidden rounded-lg border border-border sm:w-20\">\n              <span\n                suppressHydrationWarning\n                className=\"bg-card py-3 font-mono text-3xl font-bold tabular-nums sm:text-4xl\"\n              >\n                {pad(timeLeft[tile.key])}\n              </span>\n              <span className=\"border-t border-border bg-muted/40 py-1.5 text-[10px] font-medium tracking-[0.12em] text-muted-foreground uppercase\">\n                {tile.label}\n              </span>\n            </div>\n            {index < tiles.length - 1 && (\n              <span\n                aria-hidden=\"true\"\n                className=\"font-mono text-2xl font-bold text-muted-foreground/30 sm:text-3xl\"\n              >\n                :\n              </span>\n            )}\n          </Fragment>\n        ))}\n      </div>\n\n      <form\n        action=\"#\"\n        className=\"flex w-full max-w-sm flex-col gap-2 sm:flex-row\"\n      >\n        <Input\n          type=\"email\"\n          required\n          placeholder=\"you@example.com\"\n          aria-label=\"Email address\"\n        />\n        <Button type=\"submit\" className=\"shrink-0\">\n          Notify me\n        </Button>\n      </form>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/coming-soon-3.tsx"
    }
  ],
  "meta": {
    "height": "436px",
    "tier": "free"
  },
  "categories": [
    "coming-soon"
  ],
  "type": "registry:block"
}