konnosDashboard
500.tsx80 lines · main
1import { LOCAL_STORAGE_KEYS } from 'common'
2import { NextPage } from 'next'
3import { useTheme } from 'next-themes'
4import Image from 'next/legacy/image'
5import Link from 'next/link'
6import { useRouter } from 'next/router'
7import { Button } from 'ui'
8
9import { SupportLink } from '@/components/interfaces/Support/SupportLink'
10import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
11import { useSignOut } from '@/lib/auth'
12
13const Error500: NextPage = () => {
14 const router = useRouter()
15 const signOut = useSignOut()
16 const { resolvedTheme } = useTheme()
17
18 const [lastVisitedOrganization] = useLocalStorageQuery(
19 LOCAL_STORAGE_KEYS.LAST_VISITED_ORGANIZATION,
20 ''
21 )
22
23 const onClickLogout = async () => {
24 await signOut()
25 await router.push('/sign-in')
26 router.reload()
27 }
28
29 return (
30 <div className="relative mx-auto flex flex-1 w-full flex-col items-center justify-center space-y-6">
31 <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
32 <nav className="relative flex items-center justify-between sm:h-10">
33 <div className="flex shrink-0 grow items-center lg:grow-0">
34 <div className="flex w-full items-center justify-between md:w-auto">
35 <Link href="/projects">
36 <Image
37 src={
38 resolvedTheme?.includes('dark')
39 ? `${router.basePath}/img/briven-dark.svg`
40 : `${router.basePath}/img/briven-light.svg`
41 }
42 alt=""
43 height={24}
44 width={120}
45 />
46 </Link>
47 </div>
48 </div>
49 </nav>
50 </div>
51 <div className="flex w-[320px] flex-col items-center justify-center space-y-3">
52 <h4 className="text-lg">Something went wrong 🤕</h4>
53 <p className="text-center">
54 Sorry about that, please try again later or feel free to reach out to us if the problem
55 persists.
56 </p>
57 </div>
58 <div className="flex items-center space-x-4">
59 {router.pathname !== '/organizations' ? (
60 <Button asChild>
61 <Link
62 href={
63 !!lastVisitedOrganization ? `/org/${lastVisitedOrganization}` : '/organizations'
64 }
65 >
66 Head back
67 </Link>
68 </Button>
69 ) : (
70 <Button onClick={onClickLogout}>Head back</Button>
71 )}
72 <Button type="secondary" asChild>
73 <SupportLink>Submit a support request</SupportLink>
74 </Button>
75 </div>
76 </div>
77 )
78}
79
80export default Error500