-
Notifications
You must be signed in to change notification settings - Fork 10
/
NotFound.tsx
53 lines (51 loc) · 1.48 KB
/
NotFound.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { cn } from 'utils/helpers';
import { ReactComponent as IconSearch } from 'assets/icons/search-eye.svg';
import { ReactComponent as ForwardArrow } from 'assets/icons/arrow.svg';
import { useRouter } from '@tanstack/react-router';
export const NotFound = ({
variant,
title,
text,
bordered = false,
showBackButton = false,
}: {
variant: 'info' | 'error';
title: string;
text: string;
bordered?: boolean;
showBackButton?: boolean;
}) => {
const { history } = useRouter();
return (
<section
className={cn(
'gap-30 py-50 relative flex min-h-[500px] flex-col items-center justify-center px-20 text-center',
bordered && 'border-background-800 rounded border-2'
)}
>
{showBackButton && (
<button
onClick={() => history.back()}
className="absolute left-8 top-8 rounded-full p-16 hover:bg-white/20"
>
<ForwardArrow className="size-16 rotate-180" />
</button>
)}
<div
className={cn('rounded-full p-20', {
'bg-primary/20': variant === 'info',
'bg-error/20': variant === 'error',
})}
>
<IconSearch
className={cn('size-32', {
'text-primary': variant === 'info',
'text-error': variant === 'error',
})}
/>
</div>
<h2 className="max-w-[440px] text-[32px] leading-[36px]">{title}</h2>
<p className="text-16 max-w-[440px] text-white/60">{text}</p>
</section>
);
};