Michal
/
UptimeFlare
mirror of https://github.com/lyc8503/UptimeFlare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: move to Layout component

pull/108/head
Bennet Gallein 2025-05-10 11:25:07 +02:00
parent 7ffc7f0f28
commit 04f64e6c58
No known key found for this signature in database
GPG Key ID: 54F2DF6954E8C635
3 changed files with 65 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/Header.tsx
View File

@ -2,6 +2,7 @@ import { Container, Group, Text } from '@mantine/core'
import classes from '@/styles/Header.module.css'
import { pageConfig } from '@/uptime.config'
import { PageConfigLink } from '@/types/config'
import Link from 'next/link'
export default function Header() {
const linkToElement = (link: PageConfigLink) => {
@ -22,20 +23,16 @@ export default function Header() {
<header className={classes.header}>
<Container size="md" className={classes.inner}>
<div>
<a href="https://github.com/lyc8503/UptimeFlare" target="_blank">
<Text size="xl" span>
🕒
</Text>
<Link href="/">
<Text
size="xl"
span
fw={700}
variant="gradient"
gradient={{ from: 'blue', to: 'cyan', deg: 90 }}
>
UptimeFlare
{pageConfig.title || 'UptimeFlare'}
</Text>
</a>
</Link>
</div>
<Group gap={5} visibleFrom="sm">

49
components/Layout.tsx Normal file
View File

@ -0,0 +1,49 @@
import Head from 'next/head'
import { Inter } from 'next/font/google'
import Header from './Header'
import { Container, Divider, Text } from '@mantine/core'
import { pageConfig } from '@/uptime.config'
const inter = Inter({ subsets: ['latin'] })
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
<Head>
<title>{pageConfig.title}</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={inter.className}>
<Header />
<Container size="md" mt="xl">
{children}
</Container>
<Divider mt="lg" />
<Text
size="xs"
mt="xs"
mb="xs"
style={{
textAlign: 'center',
}}
className="footer"
>
Open-source monitoring and status page powered by{' '}
<a href="https://github.com/lyc8503/UptimeFlare" target="_blank">
Uptimeflare
</a>{' '}
and{' '}
<a href="https://www.cloudflare.com/" target="_blank">
Cloudflare
</a>
, made with ❤ by{' '}
<a href="https://github.com/lyc8503" target="_blank">
lyc8503
</a>
.
</Text>
</main>
</>
)
}

23
components/OverallStatus.tsx
View File

@ -58,18 +58,19 @@ export default function OverallStatus({
})
const now = new Date()
let filteredMaintenances: (Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] })[] =
maintenances
.filter((m) => now >= new Date(m.start) && (!m.end || now <= new Date(m.end)))
.map((maintenance) => ({
...maintenance,
monitors: maintenance.monitors?.map(
(monitorId) => monitors.find((mon) => monitorId === mon.id)!
),
}))
let filteredMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
monitors?: MonitorTarget[]
})[] = maintenances
.filter((m) => now >= new Date(m.start) && (!m.end || now <= new Date(m.end)))
.map((maintenance) => ({
...maintenance,
monitors: maintenance.monitors?.map(
(monitorId) => monitors.find((mon) => monitorId === mon.id)!
),
}))
return (
<Container size="md" mt="xl">
<>
<Center>{icon}</Center>
<Title mt="sm" style={{ textAlign: 'center' }} order={1}>
{statusString}
@ -88,6 +89,6 @@ export default function OverallStatus({
style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
/>
))}
</Container>
</>
)
}