58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { Box, Title, Text, Button, Group, Stack, useMantineTheme } from '@mantine/core';
|
|
import { ArrowLeft } from 'phosphor-react'; // ← Importa el icono directamente
|
|
import { Link } from 'react-router-dom';
|
|
import { MantineCardWithShader } from './HoloShader_404';
|
|
import { AppShellWithMenu } from '../Appshell/Appshell';
|
|
|
|
export function Error_404() {
|
|
const theme = useMantineTheme();
|
|
|
|
return (
|
|
<AppShellWithMenu>
|
|
<Box
|
|
style={{
|
|
flex: 1,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'flex-start',
|
|
padding: '2rem',
|
|
paddingTop: '0.5rem',
|
|
}}
|
|
>
|
|
<Box
|
|
style={{
|
|
flex: 1,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: '2rem',
|
|
}}
|
|
>
|
|
<Stack align="center" maw={500} mx="auto">
|
|
<MantineCardWithShader />
|
|
<Title order={1}>Página no encontrada</Title>
|
|
<Text size="lg">
|
|
Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes,
|
|
puedes volver al inicio fácilmente.
|
|
</Text>
|
|
<Group mt="md">
|
|
<Button
|
|
component={Link}
|
|
to="/"
|
|
size="md"
|
|
variant="gradient"
|
|
gradient={{
|
|
from: theme.colors.brand[7],
|
|
to: theme.colors.secondary[4],
|
|
}}
|
|
leftSection={<ArrowLeft size={18} />} // ← Usa el icono Phosphor aquí
|
|
>
|
|
Volver al inicio
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
</AppShellWithMenu>
|
|
);
|
|
} |