{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flipcountdown",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/countdown/flipcountdown.tsx",
      "content": "'use client';\nimport React, { useEffect, useState } from 'react';\n\n// --- Configuration ---\n// Target Date: December 31, 2026\nconst targetDate = new Date('2026-12-31T23:59:59').getTime();\n\n// --- Main Component ---\nconst FlipCountdownTailwind = () => {\n  const [timeRemaining, setTimeRemaining] = useState(targetDate - new Date().getTime());\n\n  // useEffect for the time interval\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      const difference = targetDate - new Date().getTime();\n      setTimeRemaining(difference);\n      // Clear interval when countdown finishes\n      if (difference < 1000) clearInterval(intervalId);\n    }, 1000);\n    return () => clearInterval(intervalId);\n  }, []);\n\n  // Helper function to format the time\n  const formatTime = (ms: number) => {\n    const absMs = Math.abs(ms);\n    const isNegative = ms < 0;\n\n    if (absMs < 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n\n    const totalSeconds = Math.floor(absMs / 1000);\n    const days = Math.floor(totalSeconds / (3600 * 24));\n    const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);\n    const minutes = Math.floor((totalSeconds % 3600) / 60);\n    const seconds = Math.floor(totalSeconds % 60);\n    return { days, hours, minutes, seconds, isNegative };\n  };\n\n  const time = formatTime(timeRemaining);\n\n  // Stop if complete\n  if (timeRemaining <= 0) {\n    return (\n      <div className='bg-black p-10 text-center font-sans text-white'>\n        <h1 className='text-5xl font-extrabold text-red-600'>🥳 Time's Up!</h1>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div className='flex justify-center items-center space-x-2 mt-4 font-librecaslon'>\n        {/* Days segment (Red highlight) */}\n        <TimeSegment value={time.days} label='DAYS' isHighlighted={true} isFlipping={true} />\n        <Separator />\n        {/* Hours segment */}\n        <TimeSegment value={time.hours} label='HRS' isFlipping={true} />\n        <Separator />\n        {/* Minutes segment */}\n        <TimeSegment value={time.minutes} label='MINS' isFlipping={true} />\n        <Separator />\n        {/* Seconds segment (Added for real-time tracking) */}\n        <TimeSegment value={time.seconds} label='SECS' isFlipping={true} />\n      </div>\n    </>\n  );\n};\n\n// --- Time Segment Component ---\nconst TimeSegment = ({\n  value,\n  label,\n  isHighlighted = false,\n  isFlipping = false,\n}: {\n  value: number;\n  label: string;\n  isHighlighted?: boolean;\n  isFlipping?: boolean;\n}) => {\n  const displayValue = value.toString().padStart(2, '0');\n\n  const boxClasses = `\n    w-16 h-16 2xl:w-24 2xl:h-24 xl:w-20 sm:h-20 h-16 rounded-md flex justify-center items-center relative\n    shadow-lg transition-all duration-300 font-mono\n    ${isFlipping ? 'flip-animate' : ''}\n    ${\n      isHighlighted\n        ? 'bg-linear-to-b from-orange-600 to-orange-700 border-2 border-orange-400/70 shadow-[0_0_15px_rgba(255, 113, 31, 0.6)]'\n        : 'bg-linear-to-b from-slate-800 to-slate-900 border-2 border-blue-500/50 shadow-[0_0_15px_rgba(31, 64, 253, 0.3)]'\n    }\n  `;\n\n  const digitClasses = `\n    text-3xl 2xl:text-5xl xl:text-3xl  font-bold leading-none font-mono\n    ${\n      isHighlighted\n        ? 'text-white drop-shadow-[0_0_10px_rgba(236,72,153,0.8)]'\n        : 'text-cyan-200 drop-shadow-[0_0_10px_rgba(34,211,238,0.6)]'\n    }\n  `;\n\n  return (\n    <div className='flex flex-col items-center'>\n      <div className={boxClasses}>\n        <span className={digitClasses}>{displayValue}</span>\n        <div\n          className={`absolute top-1/2 left-0 right-0 h-[2px] transform -translate-y-1/2 ${isHighlighted ? 'bg-orange-400/50' : 'bg-blue-400/30'}`}\n        ></div>\n      </div>\n      <div className='mt-2 text-xs md:text-sm font-semibold text-blue-400/80 tracking-widest uppercase drop-shadow-[0_0_4px_rgba(22,38,247,0.4)]'>\n        {label}\n      </div>\n    </div>\n  );\n};\n\n// --- Separator Component (the colons) ---\nconst Separator = () => (\n  <div className='md:text-6xl text-4xl -translate-y-2 font-extrabold text-gray-600 leading-[90px] mx-1'>\n    :\n  </div>\n);\n\nexport default FlipCountdownTailwind;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}