Step-by-step driving panel with emerald start, sky turn, and rose end markers linked by a vertical rail.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Travel30 } from "@/components/beste/piece/travel30";
<Travel30
heading="Drive · 42 min"
total="58 km · Tolls €3.20"
steps={[
{
"label": "Start · Hotel Alma Soho",
"distance": "0 km",
"type": "start"
},
{
"label": "Merge onto A1 North",
"distance": "4 km",
"type": "turn"
},
{
"label": "Exit 24 · Alcochete",
"distance": "36 km",
"type": "turn"
},
{
"label": "Arrive · Casa da Vinha",
"distance": "58 km",
"type": "end"
}
]}
/>