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 | 14x | // src/components/layout/LegalPageShell.tsx
import type {ReactElement, ReactNode} from 'react';
import {Link as RouterLink} from 'react-router-dom';
import {AppBar, Box, Button, Container, Paper, Toolbar, Typography} from '@mui/material';
import {ArrowBack as ArrowBackIcon} from '@mui/icons-material';
import Footer from './Footer';
interface LegalPageShellProps {
title: string;
/** Optional "Last updated" line shown under the title. */
lastUpdated?: string;
children: ReactNode;
}
/**
* Public, chrome-light shell for static legal/informational pages (Privacy,
* Terms, FAQ). Provides a logo bar that returns to the landing page and the
* shared site Footer.
*/
export default function LegalPageShell({title, lastUpdated, children}: LegalPageShellProps): ReactElement {
return (
<Box sx={{backgroundColor: 'background.default', minHeight: '100vh', display: 'flex', flexDirection: 'column'}}>
<AppBar position="static" elevation={0} color="transparent" sx={{borderBottom: 1, borderColor: 'divider'}}>
<Toolbar>
<Box
component={RouterLink}
to="/"
sx={{display: 'flex', alignItems: 'center', flexGrow: 1}}
>
<Box
component="img"
src="/logo-small.png"
alt="FlowState Capital"
sx={{height: 36, width: 'auto'}}
/>
</Box>
<Button component={RouterLink} to="/" startIcon={<ArrowBackIcon/>} size="small">
Back to site
</Button>
</Toolbar>
</AppBar>
<Container maxWidth="md" sx={{flexGrow: 1, py: {xs: 4, md: 6}}}>
<Typography variant="h3" component="h1" gutterBottom sx={{fontWeight: 'bold', fontSize: {xs: '1.75rem', md: '2.5rem'}}}>
{title}
</Typography>
{lastUpdated !== undefined && (
<Typography variant="body2" sx={{color: 'text.secondary', mb: 3}}>
Last updated: {lastUpdated}
</Typography>
)}
<Paper sx={{p: {xs: 3, md: 4}}}>
{children}
</Paper>
</Container>
<Container maxWidth="lg">
<Footer/>
</Container>
</Box>
);
}
|