{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "weather-sm-09",
  "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-09.tsx",
      "content": "import {\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 { Widget, WidgetContent } from \"@/registry/default/ui/widget\";\n\nexport default function WidgetDemo() {\n  const { coordinates, 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  const getDayName = (dateStr: string) => {\n    const date = new Date(dateStr);\n    return date.toLocaleDateString(\"en-US\", { weekday: \"short\" });\n  };\n\n  const forecast =\n    weather?.daily?.time.slice(0, 4).map((time, index) => ({\n      day: getDayName(time),\n      min: weather.daily.temperatureMin[index],\n      max: weather.daily.temperatureMax[index],\n      weatherCode: weather.daily.weatherCode[index],\n    })) || [];\n\n  if (isLoading) {\n    return (\n      <Widget design=\"mumbai\">\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 design=\"mumbai\">\n      <WidgetContent className=\"mt-1.5 flex w-full flex-col gap-2\">\n        {forecast.map((el, index) => (\n          <div\n            key={index}\n            className=\"grid w-full grid-cols-4 items-center gap-3 border-b pb-2 last:border-none\"\n          >\n            <Label className=\"text-muted-foreground text-base\">{el.day}</Label>\n            {getWeatherIcon(el.weatherCode, \"size-4\", { className: \"mx-auto\" })}\n            <Label className=\"mx-aut text-base\">{el.min}&deg;</Label>\n            <Label className=\"mx-auto text-base\">{el.max}&deg;</Label>\n          </div>\n        ))}\n      </WidgetContent>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "weather"
    ],
    "size": "sm"
  }
}