{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "clock-sm-03",
  "type": "registry:component",
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/clock/sm/clock-03.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  Widget,\n  WidgetContent,\n  WidgetTitle,\n} from \"@/registry/default/ui/widget\";\n\nexport default function WidgetDemo() {\n  const [time, setTime] = React.useState(new Date());\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      setTime(new Date());\n    }, 1000);\n\n    return () => {\n      clearInterval(timer);\n    };\n  }, []);\n\n  const days = [\n    \"Sunday\",\n    \"Monday\",\n    \"Tuesday\",\n    \"Wednesday\",\n    \"Thursday\",\n    \"Friday\",\n    \"Saturday\",\n  ];\n  const day = days[time.getDay()];\n\n  const hours = time.getHours() % 12;\n  const minutes = String(time.getMinutes()).padStart(2, \"0\");\n\n  return (\n    <Widget>\n      <WidgetContent className=\"flex-col gap-2\">\n        <WidgetTitle className=\"text-2xl\">{day}</WidgetTitle>\n        <WidgetTitle className=\"text-5xl tracking-widest\">\n          {hours}:{minutes}\n        </WidgetTitle>\n      </WidgetContent>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "clock"
    ],
    "size": "sm"
  }
}