Transport Result Row
Timetable-style result row for the Transport pillar. Purpose-built for comparison-heavy browsing — shows times, route, duration, stops, price, and trust signals without opening a detail page. Segment-aware: derives summary from segments[0] and segments.at(-1). Optional inline Collapsible for cancellation terms, inclusions, operator notes, and pickup instructions.
core/transport-result-rowInstallation
1 · Add registry to components.json
2 · Install component
Examples
Default
Direct flight, 2-leg journey with stop, private transfer with pickup context, and loading skeleton.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
segmentsreq | TransportSegment[] | — | All legs of the journey. Summary derived from segments[0] (origin) and segments.at(-1) (destination). |
isDirectreq | boolean | — | true when segments.length === 1. |
transferCountreq | number | — | Math.max(segments.length - 1, 0). |
durationMinutesreq | number | — | Total wall-clock journey minutes including transfer waits. |
pricereq | Money | — | Total price including all mandatory charges. |
pickupContext | string | — | Context note below the depart point, e.g. Terminal 2, door 4. |
dropoffContext | string | — | Context note below the arrive point, e.g. City centre hotel zone. |
pickupCoords | { lat: number; lng: number } | — | Decimal degrees for future map pin. |
dropoffCoords | { lat: number; lng: number } | — | Decimal degrees for future map pin. |
feeLine | string | — | Secondary price line, e.g. '+ taxes & fees'. |
rating | number | — | Operator rating. |
reviewCount | number | — | Number of reviews. |
badges | string[] | — | Short trust/feature labels, e.g. ['Baggage included', 'Free cancellation']. |
bestFitLabel | string | — | Why-this-result label, e.g. 'Fastest direct option'. |
expandableContent | React.ReactNode | — | Detail content rendered inside the Collapsible. Omit to hide the expand affordance. |
loading | boolean | false | Renders loading skeleton. |
onSelect | () => void | — | Called when the CTA is clicked. |
ctaLabel | string | "Select" | CTA button label. |