cesnimda
33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import React, { useId } from "react";
|
|
import { Box, Paper } from "@mui/material";
|
|
|
|
import { PageHeader } from "./PageLayout";
|
|
import { StackLanguageToggle } from "./AppShell";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
// Public auth pages own their forms, commands and token lifecycles.
|
|
export default function AuthPageFrame({ title, description, children }: {
|
|
title: string;
|
|
description?: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const titleId = useId();
|
|
const { language, setLocalLanguage } = useI18n();
|
|
return (
|
|
<Box component="main" aria-labelledby={titleId} sx={{
|
|
minHeight: "100svh", display: "grid", placeItems: "center", boxSizing: "border-box",
|
|
p: "var(--app-page-gutter, 16px)", bgcolor: "background.default",
|
|
}}>
|
|
<Paper elevation={0} sx={{
|
|
width: "100%", maxWidth: 520, minWidth: 0, boxSizing: "border-box",
|
|
p: "var(--app-card-padding, 16px)", border: "1px solid", borderColor: "divider",
|
|
"& > header": { flexWrap: "nowrap", gap: 1 },
|
|
"& > header > div:last-child": { flexShrink: 0 },
|
|
}}>
|
|
<PageHeader title={title} titleId={titleId} description={description} actions={<StackLanguageToggle language={language} setLanguage={setLocalLanguage} />} />
|
|
<Box sx={{ mt: "var(--app-section-gap, 24px)", minWidth: 0 }}>{children}</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|