Checkpoint

ui/src/pages/ADSB.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ButtonGroup } from 'react-bootstrap';
+import FlightIcon from '@mui/icons-material/Flight';
+import Layout from '../components/Layout';
+import { NavLink, Outlet, useLocation } from 'react-router';
+import { ADSBDataProvider } from './adsb/ADSBData';
+import type { NavLinkItem } from '../types/layout.types';
+
+interface Props {
+  navLinks?: NavLinkItem[];
+}
+
+const ADSB: React.FC<Props> = ({ navLinks = [] }) => {
+  const location = useLocation();
+
+  const viewButtons = (
+    <ButtonGroup className="adsb-view-switch" size="sm" aria-label="ADSB view switch">
+      <NavLink
+        to="/adsb/packets"
+        className={`btn btn-sm btn-icon ${location.pathname.startsWith('/adsb/packets') ? 'btn-primary' : 'btn-outline-light'}`}
+        title="Packets"
+      >
+        <FlightIcon className="icon" />
+        <span className="ms-1 d-none d-lg-inline">Packets</span>
+      </NavLink>
+    </ButtonGroup>
+  );
+
+  return (
+    <ADSBDataProvider>
+      <Layout navLinks={navLinks} buttonGroup={viewButtons}>
+        <Outlet />
+      </Layout>
+    </ADSBDataProvider>
+  );
+};
+
+export default ADSB;