{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "countdown-timer",
  "title": "Countdown Timer",
  "description": "A simple shadcn block type react component that displays countdown to a specific date.",
  "dependencies": [
    "@number-flow/react"
  ],
  "files": [
    {
      "path": "registry/components/blocks/countdown-timer.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport NumberFlow from '@number-flow/react'\nimport { useEffect, useState } from \"react\"\n\ntype CountdownTimerProps = {\n  date: Date,\n  className?: string,\n} & React.ComponentProps<\"div\">\n\nconst SECOND = 1000\nconst MINUTE = SECOND * 60\nconst HOUR = MINUTE * 60\nconst DAY = HOUR * 24\n\nexport const getTimeDiff = (target: Date, now: Date) => {\n  let diff = Math.max(0, target.getTime() - now.getTime())\n\n  const days = Math.trunc(diff / DAY)\n  diff %= DAY\n\n  const hours = Math.trunc(diff / HOUR)\n  diff %= HOUR\n\n  const minutes = Math.trunc(diff / MINUTE)\n  diff %= MINUTE\n\n  const seconds = Math.trunc(diff / SECOND)\n\n  return { days, hours, minutes, seconds }\n}\n\nexport default function CountdownTimer({ date, className, ...props }: CountdownTimerProps) {\n  const [now, setNow] = useState<Date | null>(null)\n\n  useEffect(() => {\n    let timeout: NodeJS.Timeout\n\n    const tick = () => {\n      setNow(new Date())\n      timeout = setTimeout(tick, 1000)\n    }\n\n    tick()\n\n    return () => clearTimeout(timeout)\n  }, [])\n\n  if (!now) return null\n\n  const { days, hours, minutes, seconds } = getTimeDiff(date, now)\n\n  return (\n    <div className={cn(\"flex justify-around items-center text-center gap-2\", className)} {...props}>\n      <div className=\"flex flex-col gap-1\">\n        <NumberFlow className=\"text-lg font-bold\" value={days} />\n        <span className=\"text-sm text-muted-foreground\">Days</span>\n      </div>\n      <div className=\"flex flex-col gap-1\">\n        <NumberFlow className=\"text-lg font-bold\" value={hours} />\n        <span className=\"text-sm text-muted-foreground\">Hours</span>\n      </div>\n      <div className=\"flex flex-col gap-1\">\n        <NumberFlow className=\"text-lg font-bold\" value={minutes} />\n        <span className=\"text-sm text-muted-foreground\">Minutes</span>\n      </div>\n      <div className=\"flex flex-col gap-1\">\n        <NumberFlow className=\"text-lg font-bold\" value={seconds} />\n        <span className=\"text-sm text-muted-foreground\">Seconds</span>\n      </div>\n    </div>\n  )\n}",
      "type": "registry:block",
      "target": "components/blocks/countdown-timer.tsx"
    }
  ],
  "type": "registry:block"
}