cesnimda
28 lines
1021 B
TypeScript
28 lines
1021 B
TypeScript
import React, { useId } from "react";
|
|
import { Box, Paper } from "@mui/material";
|
|
|
|
import { PageHeader } from "./PageLayout";
|
|
|
|
// 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();
|
|
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",
|
|
}}>
|
|
<PageHeader title={title} titleId={titleId} description={description} />
|
|
<Box sx={{ mt: "var(--app-section-gap, 24px)", minWidth: 0 }}>{children}</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|