mirror of
https://github.com/ente-io/ente.git
synced 2025-08-07 23:18:10 +00:00
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import { CenteredFill } from "@/base/components/containers";
|
|
import { AppNavbarNormalFlow } from "@/base/components/Navbar";
|
|
import { Paper, Stack, styled, Typography } from "@mui/material";
|
|
|
|
/**
|
|
* An ad-hoc component that abstracts the layout common to many of the pages
|
|
* exported by the the accounts package.
|
|
*
|
|
* The layout is roughly:
|
|
* - Set height to 100vh
|
|
* - An app bar at the top
|
|
* - Center a {@link Paper} in the rest of the space.
|
|
* - The children passed to this component go within this {@link Paper}.
|
|
*
|
|
* {@link AccountsPageTitle} and {@link AccountsPageFooter} are meant to be used
|
|
* in tandem with, as children of, {@link AccountsPageContents}.
|
|
*/
|
|
export const AccountsPageContents: React.FC<React.PropsWithChildren> = ({
|
|
children,
|
|
}) => (
|
|
<Stack sx={{ minHeight: "100svh" }}>
|
|
<AppNavbarNormalFlow />
|
|
<CenteredFill>
|
|
<AccountsPagePaper>{children}</AccountsPagePaper>
|
|
</CenteredFill>
|
|
</Stack>
|
|
);
|
|
|
|
const AccountsPagePaper = styled(Paper)(({ theme }) => ({
|
|
marginBlock: theme.spacing(2),
|
|
padding: theme.spacing(4, 2),
|
|
width: "min(375px, 80vw)",
|
|
minHeight: "375px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: theme.spacing(4),
|
|
}));
|
|
|
|
export const AccountsPageTitle: React.FC<React.PropsWithChildren> = ({
|
|
children,
|
|
}) => (
|
|
<Typography variant="h3" sx={{ flex: 1 }}>
|
|
{children}
|
|
</Typography>
|
|
);
|
|
|
|
export const AccountsPageFooter: React.FC<React.PropsWithChildren> = ({
|
|
children,
|
|
}) => (
|
|
<Stack
|
|
direction="row"
|
|
sx={{
|
|
mx: "4px",
|
|
// Put the items to the side,
|
|
justifyContent: "space-between",
|
|
// Unless there is just one, in which case center it.
|
|
"& :only-child": { marginInline: "auto" },
|
|
}}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
);
|