fix: imports

components/MonitorDetail.tsx

@@ -1,5 +1,5 @@
 import { Text, Tooltip } from '@mantine/core'
-import { MonitorState, MonitorTarget } from '@/uptime.types'
+import { MonitorState, MonitorTarget } from '@/types/uptime.types'
 import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react'
 import DetailChart from './DetailChart'
 import DetailBar from './DetailBar'
@@ -44,7 +44,11 @@ export default function MonitorDetail({
   const monitorNameElement = (
     <Text mt="sm" fw={700} style={{ display: 'inline-flex', alignItems: 'center' }}>
       {monitor.statusPageLink ? (
-        <a href={monitor.statusPageLink} target="_blank" style={{ display: 'inline-flex', alignItems: 'center', color: 'inherit' }}>
+        <a
+          href={monitor.statusPageLink}
+          target="_blank"
+          style={{ display: 'inline-flex', alignItems: 'center', color: 'inherit' }}
+        >
           {statusIcon} {monitor.name}
         </a>
       ) : (

components/MonitorList.tsx

@@ -1,7 +1,7 @@
-import { MonitorState, MonitorTarget } from '@/uptime.types'
+import { MonitorState, MonitorTarget } from '@/types/uptime.types'
 import { Accordion, Card, Center, Text } from '@mantine/core'
 import MonitorDetail from './MonitorDetail'
-import { pageConfig } from '@/uptime.config';
+import { pageConfig } from '@/uptime.config'
 
 function countDownCount(state: MonitorState, ids: string[]) {
   let downCount = 0
@@ -28,45 +28,61 @@ function getStatusTextColor(state: MonitorState, ids: string[]) {
   }
 }
 
-export default function MonitorList({ monitors, state }: { monitors: MonitorTarget[]; state: MonitorState }) {
+export default function MonitorList({
+  monitors,
+  state,
+}: {
+  monitors: MonitorTarget[]
+  state: MonitorState
+}) {
   // @ts-ignore
   let group: any = pageConfig.group
   let groupedMonitor = group && Object.keys(group).length > 0
   let content
-  
+
   if (groupedMonitor) {
     // Grouped monitors
     content = (
-      <Accordion multiple defaultValue={Object.keys(group)} variant='contained'>
+      <Accordion multiple defaultValue={Object.keys(group)} variant="contained">
-        {
+        {Object.keys(group).map((groupName) => (
-          Object.keys(group).map(groupName => (
+          <Accordion.Item key={groupName} value={groupName}>
-            <Accordion.Item key={groupName} value={groupName}>
+            <Accordion.Control>
-              <Accordion.Control>
+              <div
-                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+                style={{
-                  <div>{groupName}</div>
+                  display: 'flex',
-                  <Text fw={500} style={{ display: 'inline', paddingRight: '5px', color: getStatusTextColor(state, group[groupName])}}>
+                  justifyContent: 'space-between',
-                    {group[groupName].length - countDownCount(state, group[groupName])}
+                  width: '100%',
-                    /{group[groupName].length} Operational
+                  alignItems: 'center',
-                  </Text>
+                }}
-                </div>
+              >
-              </Accordion.Control>
+                <div>{groupName}</div>
-              <Accordion.Panel>
+                <Text
-                {
+                  fw={500}
-                  monitors
+                  style={{
-                  .filter(monitor => group[groupName].includes(monitor.id))
+                    display: 'inline',
-                  .sort((a, b) => group[groupName].indexOf(a.id) - group[groupName].indexOf(b.id))
+                    paddingRight: '5px',
-                  .map(monitor => (
+                    color: getStatusTextColor(state, group[groupName]),
-                    <div key={monitor.id}>
+                  }}
-                      <Card.Section ml="xs" mr="xs">
+                >
-                        <MonitorDetail monitor={monitor} state={state} />
+                  {group[groupName].length - countDownCount(state, group[groupName])}/
-                      </Card.Section>
+                  {group[groupName].length} Operational
-                    </div>
+                </Text>
-                  ))
+              </div>
-                }
+            </Accordion.Control>
-                </Accordion.Panel>
+            <Accordion.Panel>
-            </Accordion.Item>
+              {monitors
-          ))
+                .filter((monitor) => group[groupName].includes(monitor.id))
-        }
+                .sort((a, b) => group[groupName].indexOf(a.id) - group[groupName].indexOf(b.id))
+                .map((monitor) => (
+                  <div key={monitor.id}>
+                    <Card.Section ml="xs" mr="xs">
+                      <MonitorDetail monitor={monitor} state={state} />
+                    </Card.Section>
+                  </div>
+                ))}
+            </Accordion.Panel>
+          </Accordion.Item>
+        ))}
       </Accordion>
     )
   } else {

pages/index.tsx

@@ -1,9 +1,9 @@
 import Head from 'next/head'
 
 import { Inter } from 'next/font/google'
-import { MonitorState, MonitorTarget } from '@/uptime.types'
+import { MonitorState, MonitorTarget } from '@/types/uptime.types'
 import { KVNamespace } from '@cloudflare/workers-types'
-import { pageConfig, workerConfig } from '@/uptime.config'
+import { maintenances, pageConfig, workerConfig } from '@/uptime.config'
 import OverallStatus from '@/components/OverallStatus'
 import Header from '@/components/Header'
 import MonitorList from '@/components/MonitorList'
@@ -22,21 +22,17 @@ export default function Home({
   tooltip?: string
   statusPageLink?: string
 }) {
-  let state;
+  let state
   if (stateStr !== undefined) {
     state = JSON.parse(stateStr) as MonitorState
   }
 
   // Specify monitorId in URL hash to view a specific monitor (can be used in iframe)
-  const monitorId = window.location.hash.substring(1);
+  const monitorId = window.location.hash.substring(1)
   if (monitorId) {
-    const monitor = monitors.find((monitor) => monitor.id === monitorId);
+    const monitor = monitors.find((monitor) => monitor.id === monitorId)
     if (!monitor || !state) {
-      return (
+      return <Text fw={700}>Monitor with id {monitorId} not found!</Text>
-        <Text fw={700}>
-          Monitor with id {monitorId} not found!
-        </Text>
-      )
     }
     return (
       <div style={{ maxWidth: '810px' }}>
@@ -64,15 +60,20 @@ export default function Home({
           </Center>
         ) : (
           <div>
-            <OverallStatus state={state} />
+            <OverallStatus state={state} maintenances={maintenances} />
             <MonitorList monitors={monitors} state={state} />
           </div>
         )}
 
         <Divider mt="lg" />
-        <Text size="xs" mt="xs" mb="xs" style={{
+        <Text
-          textAlign: 'center'
+          size="xs"
-        }}>
+          mt="xs"
+          mb="xs"
+          style={{
+            textAlign: 'center',
+          }}
+        >
           Open-source monitoring and status page powered by{' '}
           <a href="https://github.com/lyc8503/UptimeFlare" target="_blank">
             Uptimeflare

types/config.ts

@@ -2,7 +2,6 @@ export type PageConfig = {
   title?: string
   links?: PageConfigLink[]
   group?: PageConfigGroup
-  maintenances?: Maintenances[]
 }
 
 export type Maintenances = {

uptime.config.ts

@@ -1,4 +1,4 @@
-import { PageConfig, WorkerConfig } from './types/config'
+import { Maintenances, PageConfig, WorkerConfig } from './types/config'
 
 const pageConfig: PageConfig = {
   // Title for your status page
@@ -119,5 +119,7 @@ const workerConfig: WorkerConfig = {
   },
 }
 
+const maintenances: Maintenances[] = []
+
 // Don't forget this, otherwise compilation fails.
-export { pageConfig, workerConfig }
+export { pageConfig, workerConfig, maintenances }