main.jsx — 完整可运行示例
选择行李并查看示例总价。下方是完整的 React 入口代码，包含所有状态和验证逻辑。
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
OrbitProvider,
Button,
Checkbox,
Select,
Alert,
Heading,
Text,
} from "@kiwicom/orbit-components";
import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import "@kiwicom/orbit-components/lib/tailwind.css";
import "./orbit.css";
function App() {
const [travellers, setTravellers] = useState("1"),
[cabin, setCabin] = useState(false),
[checked, setChecked] = useState(false),
[saved, setSaved] = useState(null);
const count = Number(travellers),
extras = (cabin ? 18 : 0) + (checked ? 32 : 0),
total = count * (96 + extras);
function update(fn) {
fn();
setSaved(null);
}
return (
<OrbitProvider theme={defaultTheme}>
<main className="trip">
<header>
<Text size="small">ORIGINAL TRAVEL SPECIMEN</Text>
<Heading as="h1" type="title1">Choose what travels with you</Heading>
<Text>
Fictional one-way fare. Prices illustrate the interface, not a
bookable flight.
</Text>
</header>
<div className="trip-grid">
<section>
<div className="route">
<div>
<strong>PRG</strong>
<span>Prague</span>
</div>
<div className="route-line">
<span>1h 45m · direct</span>
<i></i>
</div>
<div>
<strong>AMS</strong>
<span>Amsterdam</span>
</div>
</div>
<div className="options">
<Heading as="h2" type="title3">Travellers and baggage</Heading>
<Select
label="Travellers"
ariaLabel="Travellers"
value={travellers}
options={[1, 2, 3, 4].map((n) => ({
value: String(n),
label: n + " adult" + (n === 1 ? "" : "s"),
}))}
onChange={(e) => update(() => setTravellers(e.target.value))}
/>
<div className="bag-option">
<div>
<Heading as="h3" type="title4">Personal item</Heading>
<Text size="small">
Fits under the seat · included in this example fare
</Text>
</div>
<strong>Included</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add cabin baggage"
info="One 10 kg bag per traveller · fictional allowance"
checked={cabin}
onChange={(e) => update(() => setCabin(e.target.checked))}
/>
<strong>
€18<span>/ traveller</span>
</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add checked baggage"
info="One 20 kg bag per traveller · fictional allowance"
checked={checked}
onChange={(e) => update(() => setChecked(e.target.checked))}
/>
<strong>
€32<span>/ traveller</span>
</strong>
</div>
</div>
</section>
<aside>
<Heading as="h2" type="title3">Your example selection</Heading>
<dl>
<dt>Base fare × {count}</dt>
<dd>€{96 * count}</dd>
{cabin && (
<>
<dt>Cabin baggage × {count}</dt>
<dd>€{18 * count}</dd>
</>
)}
{checked && (
<>
<dt>Checked baggage × {count}</dt>
<dd>€{32 * count}</dd>
</>
)}
</dl>
<div className="trip-total">
<span>Total</span>
<strong>€{total}</strong>
</div>
<Text size="small">
All amounts are illustrative. No payment or reservation will be
created.
</Text>
<Button
fullWidth
onClick={() => setSaved({ count, cabin, checked, total })}
>
Review local selection
</Button>
{saved && (
<div role="status" className="trip-confirm">
<Alert type="success" title="Selection reviewed locally">
{saved.count} traveller{saved.count === 1 ? "" : "s"} · €
{saved.total}. No booking created.
</Alert>
</div>
)}
</aside>
</div>
<footer>
Native Orbit 27.7.0 components and compiled package styles. Original
layout and fictional pricing logic by OpenDesign.
</footer>
</main>
</OrbitProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);
- 创建 Vite React 项目，保留 <div id="root"></div>，并将以下内容保存为 src/main.jsx。
