48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import { Box, Title, Stack } from "@mantine/core";
|
|
import { ColorSchemePicker } from "@/features/settings/components/color-scheme-picker";
|
|
import AccentColorPicker from "@/features/settings/components/accent-color-picker";
|
|
import ThemePicker from "@/features/settings/components/theme-picker";
|
|
import LocalePicker from "@/features/settings/components/locale-picker";
|
|
import { NotificationsSection } from "@/features/settings/components/notifications-section";
|
|
import { SignOutIcon } from "@phosphor-icons/react";
|
|
import ListLink from "@/components/list-link";
|
|
import { Trans, useLingui } from "@lingui/react/macro";
|
|
import { msg } from "@lingui/core/macro";
|
|
|
|
export const Route = createFileRoute("/_authed/settings")({
|
|
loader: () => ({
|
|
header: {
|
|
title: msg`Settings`,
|
|
withBackButton: true,
|
|
},
|
|
withPadding: false,
|
|
}),
|
|
component: RouteComponent,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const { t } = useLingui();
|
|
return (
|
|
<>
|
|
<Box
|
|
px="md"
|
|
py="sm"
|
|
style={{
|
|
borderBottom: "1px solid var(--mantine-color-default-border)",
|
|
}}
|
|
>
|
|
<Title order={3}><Trans>Appearance</Trans></Title>
|
|
<Stack>
|
|
<ThemePicker />
|
|
<AccentColorPicker />
|
|
<ColorSchemePicker />
|
|
<LocalePicker />
|
|
</Stack>
|
|
</Box>
|
|
<NotificationsSection />
|
|
<ListLink label={t`Sign Out`} to="/logout" Icon={SignOutIcon} />
|
|
</>
|
|
);
|
|
}
|