mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import { RefreshCw } from 'lucide-react'
|
|
import { useTheme } from 'next-themes'
|
|
import Head from 'next/head'
|
|
import { useMemo } from 'react'
|
|
import { Button, cn } from 'ui'
|
|
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
import type { NextPageWithLayout } from '@/types'
|
|
|
|
const MaintenancePage: NextPageWithLayout = () => {
|
|
const { resolvedTheme } = useTheme()
|
|
const isDarkMode = resolvedTheme?.includes('dark')
|
|
|
|
const imgUrl = useMemo(
|
|
() =>
|
|
isDarkMode ? `${BASE_PATH}/img/supabase-dark.svg` : `${BASE_PATH}/img/supabase-light.svg`,
|
|
[isDarkMode]
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Supabase | Under Maintenance</title>
|
|
</Head>
|
|
<div className="flex flex-col items-center gap-6 text-center">
|
|
<div className="flex items-center justify-center mb-4">
|
|
<img src={imgUrl} alt="Supabase" className="h-8" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h1 className="text-2xl font-medium text-foreground">Under Maintenance</h1>
|
|
<p className="text-foreground-light max-w-xs mx-auto">
|
|
We are currently improving our services. The dashboard will be back online shortly.
|
|
</p>
|
|
</div>
|
|
<p className="text-sm text-foreground-lighter max-w-xs mx-auto">
|
|
If you need support while the dashboard is inaccessible, you can email us at{' '}
|
|
<a
|
|
href="mailto:support+maintenance@supabase.io"
|
|
className="text-foreground-light underline hover:text-foreground"
|
|
>
|
|
support+maintenance@supabase.io
|
|
</a>
|
|
</p>
|
|
<div className="flex flex-col items-center gap-2 mt-4">
|
|
<p className="text-sm text-foreground-lighter">
|
|
Reload the page to check if the maintenance window has ended
|
|
</p>
|
|
<Button onClick={() => window.location.reload()} variant="primary" icon={<RefreshCw />}>
|
|
Reload
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
MaintenancePage.getLayout = (page) => (
|
|
<div
|
|
className={cn(
|
|
'flex h-full min-h-screen bg-studio',
|
|
'w-full flex-col place-items-center',
|
|
'items-center justify-center gap-8 px-5'
|
|
)}
|
|
>
|
|
{page}
|
|
</div>
|
|
)
|
|
|
|
export default MaintenancePage
|