Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 13x 13x 120x 13x 116x | import { TableOfContents } from '../TableOfContents';
import LegalSection from '../LegalSection';
import { PageWrapper } from '../PageWrapper';
import Seo from '../Seo';
import { useTranslation } from 'react-i18next';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
interface LayoutProps {
seoTitle: string;
seoDescription: string;
pageTitle: string;
sections: readonly [string, string][];
namespace: string;
}
export default function LegalPageLayout({
seoTitle,
seoDescription,
pageTitle,
sections,
namespace,
}: LayoutProps) {
const { t } = useTranslation(namespace);
// Générateur d'ID pour l'ancre
const makeId = (key: string) =>
key.replace(/([A-Z])/g, '-$1').toLowerCase();
return (
<>
<Seo title={t(seoTitle)} description={t(seoDescription)} />
<PageWrapper>
{/* 1) Titre de la page */}
<Typography variant="h4" gutterBottom>
{t(pageTitle)}
</Typography>
{/* 2) Layout : TOC + contenu */}
<Stack direction={{ xs: 'column', md: 'row' }} spacing={4}>
{/* → On passe titleKey et namespace, pas title */}
<TableOfContents
sections={sections}
makeId={makeId}
namespace={namespace}
titleKey={`${namespace}.subtitleTableOfContents`}
/>
<Box sx={{ flex: 1, overflowWrap: 'anywhere', wordBreak: 'break-word' }}>
{sections.map(([subKey, textKey], idx) => (
<LegalSection
key={subKey}
id={makeId(subKey)}
title={t(`${namespace}.${subKey}`)}
content={t(`${namespace}.${textKey}`)}
isLast={idx === sections.length - 1}
/>
))}
</Box>
</Stack>
</PageWrapper>
</>
);
}
|