disable ssr & dark mode & bar

components/DetailChart.tsx

@@ -39,6 +39,9 @@ export default function DetailChart({ monitor, state }: { monitor: MonitorTarget
       mode: 'index' as const,
       intersect: false,
     },
+    animation: {
+      duration: 0
+    },
     plugins: {
       tooltip: {
         callbacks: {

components/MonitorDetail.tsx

@@ -3,6 +3,7 @@ import { Text, Tooltip } from "@mantine/core"
 import { MonitorState, MonitorTarget } from "@/uptime.types";
 import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react";
 import DetailChart from "./DetailChart";
+import NoSsr from "./NoSsr";
 
 function getColor(percent: number | string, darker: boolean): string {
   percent = Number(percent)
@@ -50,10 +51,10 @@ export default function MonitorDetail({ monitor, state }: { monitor: MonitorTarg
     let dayDownTime = 0
     let dayTotalTime = 0
 
-    if (state.incident[monitor.id][0].end)
+    // if (state.incident[monitor.id][0].end)
 
     uptimePercentBars.push(
-      <Tooltip label="Tooltip">
+      <Tooltip key={i} label="Tooltip">
         <div style={{ height: '20px', width: '0.8%', background: 'green', borderRadius: '2px', marginLeft: '0.155%', marginRight: '0.155%' }}/>
       </Tooltip>
     )

components/NoSsr.tsx

@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic'
+import React from 'react'
+
+const NoSsr = (props: { children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.PromiseLikeOfReactNode | null | undefined }) => (
+  <React.Fragment>{props.children}</React.Fragment>
+)
+
+export default dynamic(() => Promise.resolve(NoSsr), {
+  ssr: false
+})

components/OverallStatus.tsx

@@ -21,7 +21,7 @@ export default function OverallStatus({ state }: { state: { overallUp: number, o
       {icon}
     </Center>
     <Title mt="sm" style={{ textAlign: 'center' }} order={1}>{statusString}</Title>
-    <Title mt="sm" style={{ textAlign: 'center', color: '#70778c' }} order={5}>Last updated on: {new Date(state.lastUpdate * 1000).toLocaleString()} ({Math.round(Date.now() / 1000) - state.lastUpdate} sec ago)</Title>
+    <Title mt="sm" style={{ textAlign: 'center', color: '#70778c' }} order={5}>Last updated on: {`${new Date(state.lastUpdate * 1000).toLocaleString()} (${Math.round(Date.now() / 1000) - state.lastUpdate} sec ago)`}</Title>
   </>)
 }
 

pages/_app.tsx

@@ -1,15 +1,15 @@
 import '@mantine/core/styles.css';
 import type { AppProps } from 'next/app'
-import { MantineProvider, createTheme } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
+import NoSsr from '@/components/NoSsr';
 
-const theme = createTheme({
-  /** Put your mantine theme override here */
-});
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <MantineProvider theme={theme}>
-      <Component {...pageProps} />
-    </MantineProvider>
+    <NoSsr>
+      <MantineProvider defaultColorScheme='auto'>
+        <Component {...pageProps} />
+      </MantineProvider>
+    </NoSsr>
   )
 }