Metar overhaul, added footer, updated schemas

ui/src/components/Footer/index.tsx

@@ -0,0 +1,53 @@
+import classes from './Footer.module.css';
+import { Divider, Group, Text } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { systemInfo } from '@lib/system.ts';
+import { useMediaQuery } from '@mantine/hooks';
+
+const links = [
+  { link: `/swagger/`, newTab: true, label: 'API Docs' },
+  { link: '/cookies', label: 'Cookies' },
+  { link: '/privacy', label: 'Privacy' },
+  { link: '/terms', label: 'Terms' },
+  { link: '/contact', label: 'Contact' }
+];
+
+export function Footer() {
+  const [version, setVersion] = useState('0.0.0');
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const items = links.map((link) => (
+    <a className={classes.link} key={link.label} href={link.link} target={link.newTab ? `_blank` : ''}>
+      <Text size='sm'>{link.label}</Text>
+    </a>
+  ));
+
+  useEffect(() => {
+    systemInfo().then((info) => {
+      if (info != undefined) {
+        setVersion(info.version);
+      }
+    });
+  }, []);
+
+  return (
+    <div className={classes.footer}>
+      <Group className={classes.inner}>
+        <Group>
+          <Text size='sm'>
+            API{' '}
+            <a className={classes.link} href={'https://gitea.bensherriff.com/bsherriff/aviation'} target={'_blank'}>
+              v{version}
+            </a>
+          </Text>
+          <Divider orientation={'vertical'} />
+          <Text size='sm'>© {new Date().getFullYear()} Aviation Data</Text>
+        </Group>
+        {!isMobile && (
+          <Group gap='xs' justify='flex-end' wrap='nowrap'>
+            {items}
+          </Group>
+        )}
+      </Group>
+    </div>
+  );
+}