FlightRoutes

Component 27

About

Renders multiple routes in batch with shared defaults and per-route overrides.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FlightRoutes to your project and fits it to your theme.

Code

How FlightRoutes is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { FlightRoutes, Map } from "@/components/ui/flightcn-flight-routes";

const settings = {
  center: [118, 18],
  zoom: 2.05,
  showAirports: true,
  showLabel: true,
  hoverEffect: true,
};

export default function DefaultFlightRoutesDemo(
  props: Partial<typeof settings>,
) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex 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={s.center} zoom={s.zoom}>
          <FlightRoutes
            routes={[
              { from: "TPE", to: "HND" },
              { from: "TPE", to: "SIN" },
              { from: "TPE", to: "BKK" },
            ]}
            showAirports={s.showAirports}
            showLabel={s.showLabel}
            hoverEffect={s.hoverEffect}
            tripType="round-trip"
            lineStyle="solid"
            animate={{ duration: 7000 }}
          />
        </Map>
      </div>
    </div>
  );
}

export { DefaultFlightRoutesDemo };