A weather card that draws the sky as an animated dot-matrix scene following the time of day (sun arc, moon phase, clouds, rain, snow, wind), with the current temperature, an hourly forecast strip and a 7-day low/high range chart, plus a compact single-condition tile variant.
import { WeatherTile } from "@/components/ui/weather";
const TILES = [
{ sky: "clear", name: "Clear", temp: 21, meta: "Dry" },
{ sky: "partly", name: "Partly", temp: 20, meta: "Rain 10%" },
{ sky: "cloud", name: "Cloudy", temp: 17, meta: "Rain 20%" },
{ sky: "drizzle", name: "Drizzle", temp: 15, meta: "Rain 50%" },
{ sky: "rain", name: "Rain", temp: 14, meta: "Rain 80%" },
{ sky: "storm", name: "Thunder", temp: 16, meta: "Rain 90%" },
{ sky: "snow", name: "Snow", temp: -3, meta: "Snow 60%" },
{ sky: "sleet", name: "Sleet", temp: 1, meta: "Mixed 70%" },
{ sky: "mist", name: "Mist", temp: 9, meta: "Vis 800 m" },
{ sky: "windy", name: "Windy", temp: 15, meta: "42 km/h" },
{ sky: "heat", name: "Heat", temp: 38, meta: "UV 10" },
] as const;
export default function WeatherTileGridDemo() {
return (
<div className="flex flex-wrap items-start gap-10 p-10">
{TILES.map((t) => (
<WeatherTile
key={t.sky}
sky={t.sky}
hour={12}
temp={t.temp}
name={t.name}
meta={t.meta}
/>
))}
</div>
);
}
