{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "clock-sm-02",
  "type": "registry:component",
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/clock/sm/clock-02.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\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 formatTime = (num: number) => String(num).padStart(2, \"0\");\n\n  const hours = time.getHours() % 12;\n  const minutes = formatTime(time.getMinutes());\n  const seconds = formatTime(time.getSeconds());\n\n  return (\n    <Widget>\n      <WidgetContent className=\"flex-col gap-4\">\n        <WidgetTitle className=\"text-4xl tracking-widest\">\n          {hours}:{minutes}:{seconds}\n        </WidgetTitle>\n      </WidgetContent>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "clock"
    ],
    "size": "sm"
  }
}