konnosDashboard
maintenance.tsx69 lines · main
1import { RefreshCw } from 'lucide-react'
2import { useTheme } from 'next-themes'
3import Head from 'next/head'
4import { useMemo } from 'react'
5import { Button, cn } from 'ui'
6
7import { BASE_PATH } from '@/lib/constants'
8import type { NextPageWithLayout } from '@/types'
9
10const MaintenancePage: NextPageWithLayout = () => {
11 const { resolvedTheme } = useTheme()
12 const isDarkMode = resolvedTheme?.includes('dark')
13
14 const imgUrl = useMemo(
15 () =>
16 isDarkMode ? `${BASE_PATH}/img/briven-dark.svg` : `${BASE_PATH}/img/briven-light.svg`,
17 [isDarkMode]
18 )
19
20 return (
21 <>
22 <Head>
23 <title>Briven | Under Maintenance</title>
24 </Head>
25 <div className="flex flex-col items-center gap-6 text-center">
26 <div className="flex items-center justify-center mb-4">
27 <img src={imgUrl} alt="Briven" className="h-8" />
28 </div>
29 <div className="space-y-1">
30 <h1 className="text-2xl font-medium text-foreground">Under Maintenance</h1>
31 <p className="text-foreground-light max-w-xs mx-auto">
32 We are currently improving our services. The dashboard will be back online shortly.
33 </p>
34 </div>
35 <p className="text-sm text-foreground-lighter max-w-xs mx-auto">
36 If you need support while the dashboard is inaccessible, you can email us at{' '}
37 <a
38 href="mailto:support+maintenance@supabase.io"
39 className="text-foreground-light underline hover:text-foreground"
40 >
41 support+maintenance@supabase.io
42 </a>
43 </p>
44 <div className="flex flex-col items-center gap-2 mt-4">
45 <p className="text-sm text-foreground-lighter">
46 Reload the page to check if the maintenance window has ended
47 </p>
48 <Button onClick={() => window.location.reload()} type="primary" icon={<RefreshCw />}>
49 Reload
50 </Button>
51 </div>
52 </div>
53 </>
54 )
55}
56
57MaintenancePage.getLayout = (page) => (
58 <div
59 className={cn(
60 'flex h-full min-h-screen bg-studio',
61 'w-full flex-col place-items-center',
62 'items-center justify-center gap-8 px-5'
63 )}
64 >
65 {page}
66 </div>
67)
68
69export default MaintenancePage