Per-day weather strip for an upcoming trip with emoji glyphs, high/low, and an amber packing tip.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Travel24 } from "@/components/beste/piece/travel24";
<Travel24
city="Lisbon · Jun 14 – 18"
days={[
{
"date": "Fri 14",
"high": 27,
"low": 18,
"icon": "sun"
},
{
"date": "Sat 15",
"high": 26,
"low": 19,
"icon": "partly"
},
{
"date": "Sun 16",
"high": 23,
"low": 18,
"icon": "cloud"
},
{
"date": "Mon 17",
"high": 21,
"low": 17,
"icon": "rain"
},
{
"date": "Tue 18",
"high": 24,
"low": 18,
"icon": "partly"
}
]}
advisory="Pack a light jacket for Mon evening showers."
/>