feat: Integrate Mantine UI library, establish a theme provider, and refactor core UI components.
This commit is contained in:
Firman Ramdhani
@@ -0,0 +1 @@
|
||||
export { Button, type ButtonProps } from '@mantine/core';
|
||||
@@ -0,0 +1 @@
|
||||
export { Card, type CardProps } from '@mantine/core';
|
||||
@@ -0,0 +1 @@
|
||||
export { Checkbox, type CheckboxProps } from '@mantine/core';
|
||||
@@ -0,0 +1 @@
|
||||
export { Container, type ContainerProps } from '@mantine/core';
|
||||
@@ -0,0 +1 @@
|
||||
export { Group, type GroupProps, Stack, type StackProps } from '@mantine/core';
|
||||
@@ -0,0 +1 @@
|
||||
export { TextInput, type TextInputProps } from '@mantine/core';
|
||||
@@ -0,0 +1 @@
|
||||
export { Select, type SelectProps } from '@mantine/core';
|
||||
@@ -2,35 +2,32 @@ interface ComingSoonProps {
|
||||
showActions?: boolean;
|
||||
}
|
||||
|
||||
export function ComingSoon(props: ComingSoonProps) {
|
||||
const { showActions = false } = props;
|
||||
import { Title, Text, Button, Container, Stack, Center } from '@mantine/core';
|
||||
|
||||
export function ComingSoon({ showActions = false }: ComingSoonProps) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-white px-4">
|
||||
<div className="w-full max-w-md text-center">
|
||||
{/* Code */}
|
||||
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">Coming Soon</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)">
|
||||
Coming Soon
|
||||
</Text>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="mt-3 text-6xl font-extrabold text-brand-900">Feature in Progress</h1>
|
||||
<Title order={1} fw={900} c="brand">
|
||||
Feature in Progress
|
||||
</Title>
|
||||
|
||||
{/* Description */}
|
||||
<p className="mt-4 text-base text-gray-500">
|
||||
This feature is currently under development. Stay tuned! We'll have it ready for you very soon.
|
||||
</p>
|
||||
<Text size="md" c="dimmed">
|
||||
This feature is currently under development. Stay tuned! We'll have it ready for you very soon.
|
||||
</Text>
|
||||
|
||||
{/* Actions */}
|
||||
{showActions && (
|
||||
<div className="mt-8 flex justify-center gap-3">
|
||||
<a
|
||||
href="/"
|
||||
className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
|
||||
>
|
||||
{showActions && (
|
||||
<Button component="a" href="/" color="brand" size="md" mt="xl">
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
</Center>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,47 +3,43 @@ interface ForbiddenProps {
|
||||
showActionsHome?: boolean;
|
||||
}
|
||||
|
||||
export function Forbidden(props: ForbiddenProps) {
|
||||
const { showActionsBack = true, showActionsHome = true } = props;
|
||||
import { Title, Text, Button, Container, Stack, Group, Center } from '@mantine/core';
|
||||
|
||||
export function Forbidden({ showActionsBack = true, showActionsHome = true }: ForbiddenProps) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-white px-4">
|
||||
<div className="w-full max-w-md text-center">
|
||||
{/* Code */}
|
||||
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">403 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)">
|
||||
403 Error
|
||||
</Text>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="mt-3 text-6xl font-extrabold text-brand-900">Access Denied</h1>
|
||||
<Title order={1} fw={900} c="brand">
|
||||
Access Denied
|
||||
</Title>
|
||||
|
||||
{/* Description */}
|
||||
<p className="mt-4 text-base text-gray-500">
|
||||
Sorry, you don’t have permission to access this page. Please contact your administrator if you believe this is
|
||||
a mistake.
|
||||
</p>
|
||||
<Text size="md" c="dimmed">
|
||||
Sorry, you don’t have permission to access this page. Please contact your administrator if you believe this
|
||||
is a mistake.
|
||||
</Text>
|
||||
|
||||
{/* Actions */}
|
||||
{(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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,36 +2,33 @@ interface MaintenanceProps {
|
||||
showActions?: boolean;
|
||||
}
|
||||
|
||||
export function Maintenance(props: MaintenanceProps) {
|
||||
const { showActions = false } = props;
|
||||
import { Title, Text, Button, Container, Stack, Center } from '@mantine/core';
|
||||
|
||||
export function Maintenance({ showActions = false }: MaintenanceProps) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-white px-4">
|
||||
<div className="w-full max-w-md text-center">
|
||||
{/* Code */}
|
||||
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">Maintenance</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)">
|
||||
Maintenance
|
||||
</Text>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="mt-3 text-6xl font-extrabold text-brand-900">We'll Be Back Soon</h1>
|
||||
<Title order={1} fw={900} c="brand">
|
||||
We'll Be Back Soon
|
||||
</Title>
|
||||
|
||||
{/* Description */}
|
||||
<p className="mt-4 text-base text-gray-500">
|
||||
Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as soon
|
||||
as possible.
|
||||
</p>
|
||||
<Text size="md" c="dimmed">
|
||||
Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as
|
||||
soon as possible.
|
||||
</Text>
|
||||
|
||||
{/* Optional Actions */}
|
||||
{showActions && (
|
||||
<div className="mt-8 flex justify-center gap-3">
|
||||
<a
|
||||
href="/"
|
||||
className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
|
||||
>
|
||||
{showActions && (
|
||||
<Button component="a" href="/" color="brand" size="md" mt="xl">
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
</Center>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export { Text, type TextProps, Title, type TitleProps } from '@mantine/core';
|
||||
Reference in New Issue
Block a user