Updates to account, ui, etc

ui/src/components/AirportDrawer/index.tsx

@@ -1,10 +1,24 @@
-import { Badge, Box, Divider, Drawer, Group, Tabs, TabsList, Text, Tooltip, UnstyledButton } from '@mantine/core';
+import {
+  Accordion,
+  Badge,
+  Box,
+  Divider,
+  Drawer,
+  Group,
+  Tabs,
+  TabsList,
+  Text,
+  Tooltip,
+  UnstyledButton
+} from '@mantine/core';
 import { Airport, AirportCategory } from '@lib/airport.types.ts';
 import { getMarkerColor, Metar } from '@lib/metar.types.ts';
 import { CSSProperties, forwardRef, ReactNode, useEffect, useState } from 'react';
 import { getMetars } from '@lib/metar.ts';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconViewfinder } from '@tabler/icons-react';
+import RunwayTable from '@components/AirportDrawer/RunwayTable.tsx';
+import FrequencyTable from '@components/AirportDrawer/FrequencyTable.tsx';
 
 export default function Index({
   airport,
@@ -155,6 +169,28 @@ function AirportInfo({ airport }: { airport: Airport }) {
           </UnstyledButton>
         </AirportInfoSlot>
       </AirportInfoRow>
+      <Accordion chevronPosition={'right'} variant={'contained'}>
+        {airport.runways != null && airport.runways.length > 0 && (
+          <Accordion.Item value={'runways'}>
+            <Accordion.Control>
+              Runways
+            </Accordion.Control>
+            <Accordion.Panel>
+              <RunwayTable runways={airport.runways} />
+            </Accordion.Panel>
+          </Accordion.Item>
+        )}
+        {airport.frequencies != null && airport.frequencies.length > 0 && (
+          <Accordion.Item value={'frequencies'}>
+            <Accordion.Control>
+              Frequencies
+            </Accordion.Control>
+            <Accordion.Panel>
+              <FrequencyTable frequencies={airport.frequencies} />
+            </Accordion.Panel>
+          </Accordion.Item>
+        )}
+      </Accordion>
       <Divider />
     </div>
   );