{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flight-radar-map",
  "title": "Flight Radar Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/flight-radar-map/FlightRadarMap.tsx",
      "content": "'use client'\n\nimport { useState, useRef } from 'react'\nimport { Map, MapMarker, type MapRef } from '@/components/ui/map'\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nexport interface Flight {\n  id: string\n  callsign: string\n  airline: string\n  origin: string\n  destination: string\n  coords: [number, number]\n  heading: number\n  altitude: number\n  speed: number\n  aircraft: string\n  status: 'Cruising' | 'Ascending' | 'Descending'\n}\n\nexport interface FlightRadarMapProps {\n  accessToken?: string\n}\n\nexport function FlightRadarMap({ accessToken }: FlightRadarMapProps) {\n  const mapRef = useRef<MapRef | null>(null)\n\n  const flights: Flight[] = [\n    {\n      id: 'f-101',\n      callsign: 'UAL482',\n      airline: 'United Airlines',\n      origin: 'SFO',\n      destination: 'ORD',\n      coords: [-112.0, 39.5],\n      heading: 78,\n      altitude: 34000,\n      speed: 520,\n      aircraft: 'B787-9',\n      status: 'Cruising',\n    },\n    {\n      id: 'f-102',\n      callsign: 'DAL1209',\n      airline: 'Delta Air Lines',\n      origin: 'LAX',\n      destination: 'JFK',\n      coords: [-104.5, 36.2],\n      heading: 72,\n      altitude: 38000,\n      speed: 545,\n      aircraft: 'A350-900',\n      status: 'Cruising',\n    },\n    {\n      id: 'f-103',\n      callsign: 'AAL89',\n      airline: 'American Airlines',\n      origin: 'DFW',\n      destination: 'SEA',\n      coords: [-107.2, 42.1],\n      heading: 325,\n      altitude: 29000,\n      speed: 480,\n      aircraft: 'B737-MAX8',\n      status: 'Cruising',\n    },\n    {\n      id: 'f-104',\n      callsign: 'FDX14',\n      airline: 'FedEx Express',\n      origin: 'MEM',\n      destination: 'OAK',\n      coords: [-115.8, 38.0],\n      heading: 285,\n      altitude: 22000,\n      speed: 440,\n      aircraft: 'B777-F',\n      status: 'Descending',\n    },\n  ]\n\n  const [activeFlight, setActiveFlight] = useState<Flight>(flights[0])\n\n  const selectFlight = (f: Flight) => {\n    setActiveFlight(f)\n    mapRef.current?.flyTo({ center: f.coords, zoom: 6.5 })\n  }\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-[1fr_320px]\">\n      <div className=\"border-border bg-card relative h-[480px] overflow-hidden rounded-xl border\">\n        <Map\n          ref={mapRef}\n          accessToken={accessToken}\n          variant=\"dark\"\n          center={activeFlight.coords}\n          zoom={5.2}\n          className=\"h-full w-full\"\n        >\n          {flights.map((f) => (\n            <MapMarker key={f.id} lngLat={f.coords} anchor=\"center\" onClick={() => selectFlight(f)}>\n              <div className=\"group relative flex cursor-pointer flex-col items-center\">\n                <div\n                  className={`text-info flex size-7 items-center justify-center rounded-full font-bold ${\n                    activeFlight.id === f.id ? 'bg-info/20 ring-2 ring-sky-400' : 'bg-background/80'\n                  }`}\n                  style={{ transform: `rotate(${f.heading}deg)` }}\n                >\n                  ▲\n                </div>\n                <span\n                  className={`border-border bg-card/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-semibold tracking-wider whitespace-nowrap shadow-xs ${\n                    activeFlight.id === f.id ? 'border-info/50 text-info' : 'text-foreground'\n                  }`}\n                >\n                  {f.callsign}\n                </span>\n              </div>\n            </MapMarker>\n          ))}\n        </Map>\n      </div>\n\n      {/* Aviation Telemetry Radar Drawer */}\n      <Card className=\"flex flex-col justify-between\">\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <Badge variant=\"outline\" className=\"font-mono text-xs\">\n              {activeFlight.airline}\n            </Badge>\n            <Badge className=\"border-info/20 bg-info/10 text-info\">{activeFlight.status}</Badge>\n          </div>\n          <CardTitle className=\"mt-2 font-mono text-xl\">{activeFlight.callsign}</CardTitle>\n          <CardDescription className=\"flex items-center gap-2 font-mono text-xs\">\n            <span>{activeFlight.origin}</span>\n            <span>✈ ─── ✈</span>\n            <span>{activeFlight.destination}</span>\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"border-border bg-muted/50 grid grid-cols-2 gap-2 rounded-lg border p-2.5 font-mono text-xs\">\n            <div>\n              <div className=\"text-muted-foreground text-xs uppercase\">Altitude</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeFlight.altitude.toLocaleString()} ft</div>\n            </div>\n            <div>\n              <div className=\"text-muted-foreground text-xs uppercase\">Ground Speed</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeFlight.speed} kts</div>\n            </div>\n            <div className=\"mt-2\">\n              <div className=\"text-muted-foreground text-xs uppercase\">Heading</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeFlight.heading}°</div>\n            </div>\n            <div className=\"mt-2\">\n              <div className=\"text-muted-foreground text-xs uppercase\">Equipment</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeFlight.aircraft}</div>\n            </div>\n          </div>\n\n          <div className=\"border-border space-y-1 border-t pt-3\">\n            <div className=\"text-muted-foreground mb-1.5 font-mono text-xs tracking-wider uppercase\">\n              Monitored In-Flight\n            </div>\n            {flights.map((f) => (\n              <button\n                key={f.id}\n                type=\"button\"\n                className={`flex w-full items-center justify-between rounded-md px-2 py-1.5 text-xs transition-colors ${\n                  activeFlight.id === f.id\n                    ? 'bg-accent text-accent-foreground font-semibold'\n                    : 'hover:bg-muted text-muted-foreground'\n                }`}\n                onClick={() => selectFlight(f)}\n              >\n                <span className=\"font-mono\">\n                  {f.callsign} ({f.origin}→{f.destination})\n                </span>\n                <span className=\"font-mono text-xs opacity-75\">{f.altitude / 1000}k ft</span>\n              </button>\n            ))}\n          </div>\n\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"w-full font-mono text-xs\"\n            onClick={() => selectFlight(activeFlight)}\n          >\n            Recenter Camera\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FlightRadarMap.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/map.json"
  ],
  "description": "Real-time commercial and cargo aviation radar with aircraft altitudes, ground speeds, callsigns, and flight telemetry.",
  "categories": [
    "logistics",
    "aviation",
    "map"
  ]
}