005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import AspectRatio from '@mui/joy/AspectRatio';
|
|
import Box from '@mui/joy/Box';
|
|
import Container from '@mui/joy/Container';
|
|
import { typographyClasses } from '@mui/joy/Typography';
|
|
|
|
export default function TwoSidedLayout({
|
|
children,
|
|
reversed,
|
|
}: React.PropsWithChildren<{ reversed?: boolean }>) {
|
|
return (
|
|
<Container
|
|
sx={[
|
|
(theme) => ({
|
|
position: 'relative',
|
|
minHeight: '100vh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
py: 10,
|
|
gap: 4,
|
|
[theme.breakpoints.up(834)]: {
|
|
flexDirection: 'row',
|
|
gap: 6,
|
|
},
|
|
[theme.breakpoints.up(1199)]: {
|
|
gap: 12,
|
|
},
|
|
}),
|
|
reversed ? { flexDirection: 'column-reverse' } : { flexDirection: 'column' },
|
|
]}
|
|
>
|
|
<Box
|
|
sx={(theme) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: '1rem',
|
|
maxWidth: '50ch',
|
|
textAlign: 'center',
|
|
flexShrink: 999,
|
|
[theme.breakpoints.up(834)]: {
|
|
minWidth: 420,
|
|
alignItems: 'flex-start',
|
|
textAlign: 'initial',
|
|
},
|
|
[`& .${typographyClasses.root}`]: {
|
|
textWrap: 'balance',
|
|
},
|
|
})}
|
|
>
|
|
{children}
|
|
</Box>
|
|
<AspectRatio
|
|
ratio={600 / 520}
|
|
variant="outlined"
|
|
maxHeight={300}
|
|
sx={(theme) => ({
|
|
minWidth: 300,
|
|
alignSelf: 'stretch',
|
|
[theme.breakpoints.up(834)]: {
|
|
alignSelf: 'initial',
|
|
flexGrow: 1,
|
|
'--AspectRatio-maxHeight': '520px',
|
|
'--AspectRatio-minHeight': '400px',
|
|
},
|
|
borderRadius: 'sm',
|
|
bgcolor: 'background.level2',
|
|
flexBasis: '50%',
|
|
})}
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1483791424735-e9ad0209eea2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
|
|
alt=""
|
|
/>
|
|
</AspectRatio>
|
|
</Container>
|
|
);
|
|
}
|