Components
Loading preview...
Renders a single airport marker with optional labels, custom marker UI, and click callbacks.
npx shadcn@latest add https://21st.dev/r/ridemountainpig/flightcn-flight-airport"use client";
import { FlightAirport, Map } from "@/components/ui/flightcn-flight-airport";
export default function DefaultFlightAirportDemo() {
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={[128, 29]} zoom={2.35}>
<FlightAirport code="TPE" showLabel={true} labelPosition="top" />
<FlightAirport code="HND" showLabel={true} labelPosition="top" />
<FlightAirport code="ICN" showLabel={true} labelPosition="top" />
</Map>
</div>
</div>
);
}
export { DefaultFlightAirportDemo };