55 lines
2 KiB
TypeScript
55 lines
2 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
|
|
import { Page, PageContent, PageHeader } from '../../components/page';
|
|
import { SettingsContentCenter } from './styles.css';
|
|
|
|
type SettingsPageProps = {
|
|
title: ReactNode;
|
|
requestClose: () => void;
|
|
children: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* Shared chrome for every settings sub-page — Dawn `SurfaceVariant` surface, a
|
|
* title header with the close button, and a hover-scrolled content column.
|
|
* Sections inside are spaced with a single rhythm (gap 500) so grouped panels
|
|
* read as a consistent vertical stack.
|
|
*/
|
|
export function SettingsPage({ title, requestClose, children }: SettingsPageProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Page variant="SurfaceVariant">
|
|
{/* paddingRight:0 matches PageContent so the header's centered 720 column
|
|
lines up exactly with the content column below (PageHeader defaults to
|
|
a S200 right pad, which would shift the title ~4px off the content). */}
|
|
<PageHeader outlined={false} style={{ paddingRight: 0 }}>
|
|
<Box className={SettingsContentCenter} gap="200" alignItems="Center">
|
|
<Box grow="Yes" alignItems="Center" gap="200">
|
|
<Text size="H3" truncate>
|
|
{title}
|
|
</Text>
|
|
</Box>
|
|
<Box shrink="No" alignItems="Center" gap="200">
|
|
<IconButton
|
|
onClick={requestClose}
|
|
variant="SurfaceVariant"
|
|
aria-label={t('Settings.close')}
|
|
>
|
|
<Icon src={Icons.Cross} />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
</PageHeader>
|
|
<Box grow="Yes">
|
|
<Scroll hideTrack visibility="Hover">
|
|
<PageContent style={{ paddingBottom: '1rem' }}>
|
|
<Box className={SettingsContentCenter} direction="Column" gap="500">
|
|
{children}
|
|
</Box>
|
|
</PageContent>
|
|
</Scroll>
|
|
</Box>
|
|
</Page>
|
|
);
|
|
}
|