区間（発着）OriginDestinationExperimental
The A→B route header: 出発 → 到着 (東京 → 新大阪 / HND → CTS / POL → POD / 新宿 → 大阪), each endpoint a label + optional sub (code / time / platform), joined by an arrow (or a connector slot for a duration / mode icon), with an optional swap button (出発⇄到着) and via stops. The compact identity of every transit / freight SEARCH & RESULT screen — a HORIZONTAL A→B across the top, NOT a vertical sequence (that is RouteStops / Itinerary, which go DOWN the page). `inline` gives the small single-line variant for a result row (発→着 times). from + to (+ via[]) of {label, sub?}; connector, onSwap, inline, label. RSC-safe except the opt-in onSwap.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| from / to | OriginDestinationEndpoint | - | 出発・到着＝{ label, sub? }（東京 / HND / 上海港 ＋ コード/時刻/番線）。 |
| via | OriginDestinationEndpoint[] | - | 経由地（from と to の間に表示）。 |
| connector | ReactNode | - | 矢印の所要時間/モードアイコン等（既定は矢印のみ）。 |
| onSwap | () => void | - | 出発⇄到着 の入れ替えボタン（via 無しのとき）。 |
| inline | boolean | false | 結果行用の小さい1行レイアウト（発→着 時刻）。既定は目立つヘッダ。 |
| label | ReactNode | - | アクセシブル名。既定「<from> から <to>」。 |
Usage
import { OriginDestination } from "@gunjo/ui"
// Header — prominent A→B with a swap button + duration connector.
<OriginDestination
from={{ label: "東京", sub: "新幹線" }}
to={{ label: "新大阪", sub: "新幹線" }}
connector="のぞみ最速 2:27"
onSwap={swapStations}
/>
// Inline — the per-result 発→着 row.
<OriginDestination inline from={{ label: "06:00", sub: "発" }} to={{ label: "08:27", sub: "着" }} />