{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "time-ago-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/time-ago"
  ],
  "files": [
    {
      "path": "registry/example/time-ago-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\n\nimport EnhancedTimeAgo from \"./enhanced-time-ago-demo\"\nimport SimpleTimeAgo from \"./simple-time-ago-demo\"\n\nconst TimeAgoDemo = () => {\n  const [selectedDate, setSelectedDate] = useState(new Date())\n\n  const presetTimes = [\n    { label: \"Just now\", time: new Date() },\n    { label: \"1 hour ago\", time: new Date(Date.now() - 3600000) },\n    { label: \"1 day ago\", time: new Date(Date.now() - 86400000) },\n    { label: \"1 week ago\", time: new Date(Date.now() - 604800000) },\n    { label: \"1 month ago\", time: new Date(Date.now() - 2592000000) },\n    { label: \"Future\", time: new Date(Date.now() + 3600000) },\n  ]\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl space-y-6 p-6\">\n      <Tabs defaultValue=\"presets\" className=\"w-full\">\n        <TabsList className=\"grid w-full grid-cols-2\">\n          <TabsTrigger value=\"presets\">Preset Times</TabsTrigger>\n          <TabsTrigger value=\"custom\">Custom Date</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"presets\">\n          <div className=\"mb-6 grid grid-cols-2 gap-4\">\n            {presetTimes.map((preset, idx) => (\n              <Button\n                key={idx}\n                variant={\n                  selectedDate.getTime() === preset.time.getTime() ?\n                    \"default\"\n                  : \"outline\"\n                }\n                onClick={() => setSelectedDate(preset.time)}\n                className=\"w-full justify-start\"\n              >\n                {preset.label}\n              </Button>\n            ))}\n          </div>\n        </TabsContent>\n        <TabsContent value=\"custom\">\n          <div className=\"mb-6 flex items-center gap-4\">\n            <input\n              type=\"datetime-local\"\n              className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50\"\n              value={selectedDate.toISOString().slice(0, 16)}\n              onChange={(e) => setSelectedDate(new Date(e.target.value))}\n            />\n          </div>\n        </TabsContent>\n      </Tabs>\n\n      <div className=\"mt-4 grid gap-6 md:grid-cols-2\">\n        <SimpleTimeAgo date={selectedDate} />\n        <EnhancedTimeAgo date={selectedDate} />\n      </div>\n    </div>\n  )\n}\n\nexport default TimeAgoDemo\n",
      "type": "registry:example",
      "target": "components/time-ago-demo.tsx"
    }
  ],
  "type": "registry:example"
}