{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "weather-sm-06",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/label.json",
    "https://wigggle-ui.vercel.app/r/use-location.json",
    "https://wigggle-ui.vercel.app/r/use-weather.json",
    "https://wigggle-ui.vercel.app/r/weather-utils.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/weather/sm/weather-06.tsx",
      "content": "import { DropletIcon, ThermometerIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  DEFAULT_LOCATION,\n  useLocation,\n} from \"@/registry/default/hooks/use-location\";\nimport { useWeather } from \"@/registry/default/hooks/use-weather\";\nimport { getWeatherIcon } from \"@/registry/default/lib/weather-utils\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Widget,\n  WidgetContent,\n  WidgetFooter,\n  WidgetHeader,\n  WidgetTitle,\n} from \"@/registry/default/ui/widget\";\n\nexport default function WidgetDemo() {\n  const { coordinates, city, isLoading: isLoadingLocation } = useLocation();\n  const { data: weather, isLoading: isLoadingWeather } = useWeather(\n    coordinates?.lat ?? DEFAULT_LOCATION.lat,\n    coordinates?.lon ?? DEFAULT_LOCATION.lon,\n  );\n  const [time, setTime] = React.useState<string>(\"\");\n\n  React.useEffect(() => {\n    const updateTime = () => {\n      const now = new Date();\n      setTime(\n        now.toLocaleTimeString(\"en-US\", {\n          hour: \"numeric\",\n          minute: \"2-digit\",\n          hour12: false,\n        }),\n      );\n    };\n    updateTime();\n    const interval = setInterval(updateTime, 60000);\n    return () => clearInterval(interval);\n  }, []);\n\n  const isLoading = isLoadingLocation || isLoadingWeather;\n\n  if (isLoading) {\n    return (\n      <Widget>\n        <WidgetContent className=\"flex items-center justify-center\">\n          <Label className=\"animate-pulse\">Loading...</Label>\n        </WidgetContent>\n      </Widget>\n    );\n  }\n\n  return (\n    <Widget>\n      <WidgetHeader>\n        <WidgetTitle>{city || \"Unknown\"}</WidgetTitle>\n        <WidgetTitle className=\"font-normal\">{time}</WidgetTitle>\n      </WidgetHeader>\n      <WidgetContent>\n        {weather && getWeatherIcon(weather.weatherCode, \"size-9\")}\n      </WidgetContent>\n      <WidgetFooter>\n        <div className=\"flex flex-col items-center\">\n          <div className=\"flex h-max w-full items-center justify-start\">\n            <ThermometerIcon className=\"mr-1 size-5\" />\n            <Label>{weather?.feelsLike}&deg;</Label>\n          </div>\n          <div className=\"flex h-max w-full items-center justify-start\">\n            <DropletIcon className=\"mr-1 size-5\" />\n            <Label>{weather?.humidity}%</Label>\n          </div>\n        </div>\n        <div className=\"flex w-full justify-end\">\n          <Label className=\"text-4xl\">{weather?.temperature}&deg;</Label>\n        </div>\n      </WidgetFooter>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "weather"
    ],
    "size": "sm"
  }
}