Hourly Forecast

Six-column hourly strip pairing each label with a condition icon and a tabular temperature.

Now22°
10 AM23°
11 AM24°
12 PM24°
1 PM21°
2 PM20°

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Weather3 } from "@/components/beste/piece/weather3";

<Weather3
  hours={[
    {
      "label": "Now",
      "condition": "sunny",
      "temp": 22
    },
    {
      "label": "10 AM",
      "condition": "sunny",
      "temp": 23
    },
    {
      "label": "11 AM",
      "condition": "cloudy",
      "temp": 24
    },
    {
      "label": "12 PM",
      "condition": "cloudy",
      "temp": 24
    },
    {
      "label": "1 PM",
      "condition": "rainy",
      "temp": 21
    },
    {
      "label": "2 PM",
      "condition": "rainy",
      "temp": 20
    }
  ]}
/>