Refactor code structure for improved readability and maintainability

2025-09-30 01:43:53 +02:00
commit 0bcee91d5f
66 changed files with 19842 additions and 0 deletions
@@ -0,0 +1,58 @@
+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>
+  );
+}