{
  "name": "relative-time-card-demo",
  "type": "registry:example",
  "registryDependencies": [
    "button",
    "hover-card"
  ],
  "files": [
    {
      "path": "examples/relative-time-card-demo.tsx",
      "type": "registry:example",
      "content": "import { Clock } from \"lucide-react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { RelativeTimeCard } from \"@/registry/bases/radix/ui/relative-time-card\";\n\nexport default function RelativeTimeCardDemo() {\n  const now = new Date();\n  const fiveMinutesAgo = new Date(now.getTime() - 5 * 60 * 1000);\n  const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);\n  const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);\n  const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">Basic usage</span>\n        <RelativeTimeCard date={fiveMinutesAgo} />\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">\n          Different variants\n        </span>\n        <div className=\"flex items-center gap-4\">\n          <RelativeTimeCard date={oneHourAgo} variant=\"default\" />\n          <RelativeTimeCard date={oneHourAgo} variant=\"muted\" />\n          <RelativeTimeCard date={oneHourAgo} variant=\"ghost\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">\n          With time in the future\n        </span>\n        <div className=\"flex items-center gap-4\">\n          <RelativeTimeCard date={tomorrow} />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">\n          Multiple timezones\n        </span>\n        <RelativeTimeCard\n          date={oneDayAgo}\n          timezones={[\"America/New_York\", \"Europe/London\", \"Asia/Tokyo\"]}\n        />\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">Custom trigger</span>\n        <RelativeTimeCard date={now} asChild>\n          <Button variant=\"outline\" size=\"sm\">\n            <Clock />\n            View time details\n          </Button>\n        </RelativeTimeCard>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm text-muted-foreground\">\n          Different positions\n        </span>\n        <div className=\"flex items-center gap-4\">\n          <RelativeTimeCard date={now} side=\"top\" align=\"start\">\n            Top Start\n          </RelativeTimeCard>\n          <RelativeTimeCard date={now} side=\"right\" align=\"center\">\n            Right Center\n          </RelativeTimeCard>\n          <RelativeTimeCard date={now} side=\"bottom\" align=\"end\">\n            Bottom End\n          </RelativeTimeCard>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}