Files
myeasycms-v2/apps/web/app/error.tsx
giancarlo b99295b364 Update error and not-found page styles
Removed unused import from error page and adjusted the heading styles on both the 500 error page and the 404 not-found page. By increasing the size of the text headings and updating the font to 'font-heading', the pages are now more consistent with the overall design layout.
2024-04-19 15:38:28 +08:00

63 lines
1.6 KiB
TypeScript

'use client';
import { ArrowLeft } from 'lucide-react';
import { useCaptureException } from '@kit/monitoring/hooks';
import { Button } from '@kit/ui/button';
import { Heading } from '@kit/ui/heading';
import { Trans } from '@kit/ui/trans';
import { SiteHeader } from '~/(marketing)/_components/site-header';
const ErrorPage = ({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) => {
useCaptureException(error);
return (
<div className={'flex h-screen flex-1 flex-col'}>
<SiteHeader />
<div
className={
'm-auto flex w-full flex-1 flex-col items-center justify-center'
}
>
<div className={'flex flex-col items-center space-y-16'}>
<div>
<h1 className={'font-heading text-9xl font-extrabold'}>500 :(</h1>
</div>
<div className={'flex flex-col items-center space-y-4'}>
<div className={'flex flex-col items-center space-y-2.5'}>
<div>
<Heading level={1}>
<Trans i18nKey={'common:genericError'} />
</Heading>
</div>
<p className={'text-muted-foreground'}>
<Trans i18nKey={'common:genericErrorSubHeading'} />
</p>
</div>
<div>
<Button variant={'outline'} onClick={reset}>
<ArrowLeft className={'mr-2 h-4'} />
<Trans i18nKey={'common:goBack'} />
</Button>
</div>
</div>
</div>
</div>
</div>
);
};
export default ErrorPage;