feat: Integrate Mantine UI library, establish a theme provider, and refactor core UI components.

2026-02-27 15:00:17 +07:00
parent 8181bd61ec
commit 1d38a188b7
23 changed files with 646 additions and 344 deletions
@@ -3,42 +3,42 @@ interface NotFoundProps {
  showActionsHome?: boolean;
 }

-export function NotFound(props: NotFoundProps) {
-  const { showActionsBack = true, showActionsHome = true } = props;
+import { Title, Text, Button, Container, Stack, Group, Center } from '@mantine/core';

+export function NotFound({ showActionsBack = true, showActionsHome = true }: NotFoundProps) {
  return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4">
-      <div className="w-full max-w-md text-center">
-        <p className="text-sm font-medium uppercase tracking-widest text-gray-400">404 Error</p>
+    <Container size="sm" h="100vh" pos="relative">
+      <Center h="100%">
+        <Stack align="center" ta="center" gap="md">
+          <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
+            404 Error
+          </Text>

-        <h1 className="mt-3 text-6xl font-extrabold text-brand-900">Page Not Found</h1>
+          <Title order={1} fw={900} c="brand">
+            Page Not Found
+          </Title>

-        <p className="mt-4 text-base text-gray-500">
-          Sorry, the page you’re looking for doesn’t exist or has been moved.
-        </p>
+          <Text size="md" c="dimmed">
+            Sorry, the page you’re looking for doesn’t exist or has been moved.
+          </Text>

-        {(showActionsBack || showActionsHome) && (
-          <div className="mt-8 flex justify-center gap-3">
-            {showActionsBack && (
-              <button
-                onClick={() => window.history.back()}
-                className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer"
-              >
-                Go Back
-              </button>
-            )}
+          {(showActionsBack || showActionsHome) && (
+            <Group mt="xl" justify="center">
+              {showActionsBack && (
+                <Button variant="default" size="md" onClick={() => window.history.back()}>
+                  Go Back
+                </Button>
+              )}

-            {showActionsHome && (
-              <a
-                href="/"
-                className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
-              >
-                Back to Home
-              </a>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
+              {showActionsHome && (
+                <Button component="a" href="/" color="brand" size="md">
+                  Back to Home
+                </Button>
+              )}
+            </Group>
+          )}
+        </Stack>
+      </Center>
+    </Container>
  );
 }