67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import { Container } from '@/ui/Container';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Text } from '@/ui/Text';
|
|
import { Section } from '@/ui/Section';
|
|
import { Panel } from '@/ui/Panel';
|
|
|
|
interface AlternatingSectionProps {
|
|
heading: string;
|
|
description: string | React.ReactNode;
|
|
mockup: React.ReactNode;
|
|
layout: 'text-left' | 'text-right';
|
|
}
|
|
|
|
export function AlternatingSection({
|
|
heading,
|
|
description,
|
|
mockup,
|
|
layout,
|
|
}: AlternatingSectionProps) {
|
|
const textContent = (
|
|
<Stack gap={8}>
|
|
<Stack gap={4}>
|
|
<Heading level={2} weight="bold">
|
|
{heading}
|
|
</Heading>
|
|
</Stack>
|
|
<Stack>
|
|
{typeof description === 'string' ? (
|
|
<Text size="lg" variant="low">{description}</Text>
|
|
) : (
|
|
description
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
|
|
const mockupContent = (
|
|
<Panel variant="dark">
|
|
<Stack align="center" justify="center">
|
|
{mockup}
|
|
</Stack>
|
|
</Panel>
|
|
);
|
|
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Container size="lg">
|
|
<Grid cols={{ base: 1, lg: 2 }} gap={12}>
|
|
{layout === 'text-left' ? (
|
|
<>
|
|
{textContent}
|
|
{mockupContent}
|
|
</>
|
|
) : (
|
|
<>
|
|
{mockupContent}
|
|
{textContent}
|
|
</>
|
|
)}
|
|
</Grid>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|