69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
import {
|
|
AppShell,
|
|
Button,
|
|
Container,
|
|
Group,
|
|
Text,
|
|
useMantineColorScheme,
|
|
} from "@mantine/core";
|
|
import { IconChevronLeft } from "@tabler/icons-react";
|
|
import { createFileRoute, Outlet, useNavigate } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/profile")({
|
|
component: ProfileLayout,
|
|
});
|
|
|
|
function ProfileLayout() {
|
|
const navigate = useNavigate();
|
|
const { colorScheme } = useMantineColorScheme();
|
|
const dark = colorScheme === "dark";
|
|
|
|
return (
|
|
<AppShell
|
|
header={{ height: 60 }}
|
|
padding="md"
|
|
styles={{
|
|
main: {
|
|
backgroundColor: dark
|
|
? "var(--mantine-color-dark-8)"
|
|
: "var(--mantine-color-gray-0)",
|
|
},
|
|
}}
|
|
>
|
|
<AppShell.Header
|
|
style={{
|
|
borderBottom: "1px solid var(--mantine-color-default-border)",
|
|
backgroundColor: dark ? "var(--mantine-color-dark-7)" : "white",
|
|
paddingLeft: "1rem",
|
|
paddingRight: "1rem",
|
|
}}
|
|
>
|
|
<Group h="100%" justify="space-between">
|
|
<Group>
|
|
<Button
|
|
variant="subtle"
|
|
color="gray"
|
|
leftSection={<IconChevronLeft size={16} />}
|
|
onClick={() => navigate({ to: "/" })}
|
|
>
|
|
Kembali ke Dashboard
|
|
</Button>
|
|
</Group>
|
|
|
|
<Text fw={700} size="lg" c="orange.6">
|
|
PENGATURAN AKUN
|
|
</Text>
|
|
|
|
<Box w={150} />
|
|
</Group>
|
|
</AppShell.Header>
|
|
|
|
<AppShell.Main>
|
|
<Outlet />
|
|
</AppShell.Main>
|
|
</AppShell>
|
|
);
|
|
}
|
|
|
|
import { Box } from "@mantine/core";
|