{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "weather-md-02",
  "type": "registry:component",
  "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/md/weather-02.tsx",
      "content": "import {\n  DEFAULT_LOCATION,\n  useLocation,\n} from \"@/registry/default/hooks/use-location\";\nimport { useWeather } from \"@/registry/default/hooks/use-weather\";\nimport {\n  getSmallWeatherIcon,\n  getWeatherIcon,\n} from \"@/registry/default/lib/weather-utils\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Widget,\n  WidgetContent,\n  WidgetHeader,\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\n  const isLoading = isLoadingLocation || isLoadingWeather;\n\n  // Get next 6 hours including current or starting from now\n  const next6Hours =\n    weather?.hourly.time.slice(0, 6).map((time, index) => {\n      const date = new Date(time);\n      const hour = date.getHours();\n      const ampm = hour >= 12 ? \"PM\" : \"AM\";\n      const hour12 = hour % 12 || 12;\n\n      return {\n        time: `${hour12} ${ampm}`,\n        temp: weather.hourly.temperature[index],\n        weatherCode: weather.hourly.weatherCode[index],\n      };\n    }) || [];\n\n  if (isLoading) {\n    return (\n      <Widget size=\"md\">\n        <WidgetContent>\n          <div className=\"flex w-full items-center justify-center\">\n            <Label className=\"animate-pulse\">Loading weather data...</Label>\n          </div>\n        </WidgetContent>\n      </Widget>\n    );\n  }\n\n  return (\n    <Widget size=\"md\">\n      <WidgetHeader className=\"items-start\">\n        <div className=\"flex flex-col items-start\">\n          <Label>{city || \"Unknown Location\"}</Label>\n          <Label className=\"text-4xl\">{weather?.temperature}&deg;</Label>\n        </div>\n        <div className=\"flex flex-col items-start\">\n          {weather && getWeatherIcon(weather.weatherCode)}\n        </div>\n      </WidgetHeader>\n      <WidgetContent className=\"mt-4 grid w-full grid-cols-6 items-end gap-6\">\n        {next6Hours.map((el, index) => (\n          <div key={index} className=\"flex flex-col items-center gap-1\">\n            <Label className=\"text-muted-foreground text-xs\">{el.time}</Label>\n            <Label>{getSmallWeatherIcon(el.weatherCode)}</Label>\n            <Label className=\"text-lg\">{el.temp}&deg;</Label>\n          </div>\n        ))}\n      </WidgetContent>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "weather"
    ],
    "size": "md"
  }
}