38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import { useNavigate } from 'react-router-dom';
|
|
import { Button } from '@astryxdesign/core/Button';
|
|
import { Text, Heading } from '@astryxdesign/core/Text';
|
|
import { Home } from 'lucide-react';
|
|
|
|
export default function Error404() {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: '100vh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '24px',
|
|
textAlign: 'center',
|
|
backgroundColor: '#f8fafc',
|
|
fontFamily: 'system-ui, sans-serif'
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
|
|
<span style={{ fontWeight: 900, fontSize: 'clamp(3.5rem, 18vw, 8rem)', lineHeight: 1, color: '#0A1317' }}>
|
|
404
|
|
</span>
|
|
<div style={{ width: '64px', height: '4px', borderRadius: '2px', backgroundColor: '#0A1317' }} />
|
|
<Heading level={2}>Page Not Found</Heading>
|
|
<div style={{ maxWidth: '460px' }}>
|
|
<Text type="body" color="secondary">
|
|
The page you are looking for was moved, removed, renamed, or might never exist!
|
|
</Text>
|
|
</div>
|
|
<Button variant="primary" icon={<Home size={16} />} onClick={() => navigate('/dashboard')} label="Back To Home" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|