About this piece
Multi-City Route
Minimal multi-stop route with airport codes joined by thin connectors and a caption beneath each hop.
Usage
The import and the props worth knowing about, in one place.
import { Travel23 } from "@/components/beste/piece/travel23";
<Travel23
hops={[
{
"code": "IST",
"caption": "Depart"
},
{
"code": "DOH",
"caption": "2h"
},
{
"code": "BKK",
"caption": "4 days"
},
{
"code": "SIN",
"caption": "3 days"
},
{
"code": "TYO",
"caption": "Return"
}
]}
summary="11-day multi-city itinerary"
/>More Travel pieces
View all Travel09:40IST
12:20CDG
2h 30m layover in Paris
14:50CDG
17:05LHR
Trip Segments
Multi-leg journey card with stacked segment rows and an amber layover strip between them.
Turkish Airlines
$31209:40IST
4h 40m · Direct
12:20LHR
Flight Card
Flight result with airline, price, two airport codes, and a dotted route arc connecting times.
ISTIstanbul
HNDTokyo
Route Arc
Visual route card with origin and destination framing an SVG dashed great-circle arc in a selectable tone.
BA 117In flight
LHR09:40 · London
JFK12:50 · New York
Landing in 2h 10m0%
Flight Progress
Flight card with a small plane gliding along the arc between two airports as the dotted trail fills behind it and the landing countdown ticks toward Landed.
