57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { Container, Group, Text } from '@mantine/core'
|
|
import classes from '@/styles/Header.module.css'
|
|
import { pageConfig } from '@/uptime.config'
|
|
import { PageConfigLink } from '@/types/config'
|
|
|
|
export default function Header() {
|
|
const linkToElement = (link: PageConfigLink, i: number) => {
|
|
return (
|
|
<a
|
|
key={i}
|
|
href={link.link}
|
|
target={link.link.startsWith('/') ? undefined : '_blank'}
|
|
className={classes.link}
|
|
data-active={link.highlight}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
const links = [{ label: 'Incident History', link: '/incidents' }, ...(pageConfig.links || [])]
|
|
|
|
return (
|
|
<header className={classes.header}>
|
|
<Container size="md" className={classes.inner}>
|
|
<div>
|
|
<a
|
|
href={location.pathname == '/' ? 'https://github.com/lyc8503/UptimeFlare' : '/'}
|
|
target={location.pathname == '/' ? '_blank' : undefined}
|
|
>
|
|
<Text size="xl" span>
|
|
🕒
|
|
</Text>
|
|
<Text
|
|
size="xl"
|
|
span
|
|
fw={700}
|
|
variant="gradient"
|
|
gradient={{ from: 'blue', to: 'cyan', deg: 90 }}
|
|
>
|
|
UptimeFlare
|
|
</Text>
|
|
</a>
|
|
</div>
|
|
|
|
<Group gap={5} visibleFrom="sm">
|
|
{links?.map(linkToElement)}
|
|
</Group>
|
|
|
|
<Group gap={5} hiddenFrom="sm">
|
|
{links?.filter((link) => (link.highlight || link.link.startsWith('/'))).map(linkToElement)}
|
|
</Group>
|
|
</Container>
|
|
</header>
|
|
)
|
|
}
|