konnosDashboard
404.tsx70 lines · main
1import { NextPage } from 'next'
2import { useTheme } from 'next-themes'
3import Image from 'next/legacy/image'
4import Link from 'next/link'
5import { useEffect, useState } from 'react'
6import { Button } from 'ui'
7
8import { BASE_PATH } from '@/lib/constants'
9
10const Error404: NextPage = ({}) => {
11 const { resolvedTheme } = useTheme()
12 const [show404, setShow404] = useState<boolean>(false)
13
14 useEffect(() => {
15 setTimeout(() => {
16 setShow404(true)
17 }, 500)
18 }, [])
19
20 return (
21 <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
22 <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
23 <nav className="relative flex items-center justify-between sm:h-10">
24 <div className="flex shrink-0 grow items-center lg:grow-0">
25 <div className="flex w-full items-center justify-between md:w-auto">
26 <Link href="/projects">
27 <Image
28 src={
29 resolvedTheme?.includes('dark')
30 ? `${BASE_PATH}/img/briven-dark.svg`
31 : `${BASE_PATH}/img/briven-light.svg`
32 }
33 alt="briven"
34 height={24}
35 width={120}
36 />
37 </Link>
38 </div>
39 </div>
40 </nav>
41 </div>
42 <div
43 className={`absolute select-none opacity-5 filter transition duration-200 ${
44 show404 ? 'blur-xs' : 'blur-none'
45 }`}
46 >
47 <h1 style={{ fontSize: '28rem' }}>404</h1>
48 </div>
49 <div
50 className={`flex flex-col items-center justify-center space-y-6 transition ${
51 show404 ? 'opacity-100' : 'opacity-0'
52 }`}
53 >
54 <div className="flex w-[380px] flex-col items-center justify-center space-y-3 text-center">
55 <h3 className="text-xl">Looking for something? 🔍</h3>
56 <p className="text-foreground-light">
57 We couldn't find the page that you're looking for!
58 </p>
59 </div>
60 <div className="flex items-center space-x-4">
61 <Button asChild size="small">
62 <Link href="/projects">Head back</Link>
63 </Button>
64 </div>
65 </div>
66 </div>
67 )
68}
69
70export default Error404