54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
}
|