Components
Loading preview...
Renders connecting multi-leg routes from ordered waypoints, ideal for itinerary visualization.
npx shadcn@latest add https://21st.dev/r/ridemountainpig/flightcn-flight-multi-route"use client";
import { FlightMultiRoute, Map } from "@/components/ui/flightcn-flight-multi-route";
export default function DefaultFlightMultiRouteDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="h-[420px] w-full max-w-4xl overflow-hidden rounded-lg border bg-background shadow-sm">
<Map center={[28, 28]} zoom={1.2}>
<FlightMultiRoute
waypoints={["TPE", "DXB", "ZRH", "JFK"]}
showAirports={true}
showLabel={true}
hoverEffect={true}
tripType="round-trip"
lineStyle="solid"
animate={{ duration: 9000 }}
/>
</Map>
</div>
</div>
);
}
export { DefaultFlightMultiRouteDemo };