74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Section } from './Section';
|
|
import { Container } from './Container';
|
|
import { Box } from './Box';
|
|
import { Glow } from './Glow';
|
|
import { Heading } from './Heading';
|
|
|
|
interface FeatureSectionProps {
|
|
heading: string;
|
|
description: React.ReactNode;
|
|
mockup: React.ReactNode;
|
|
layout?: 'text-left' | 'text-right';
|
|
intent?: 'primary' | 'aqua' | 'amber';
|
|
}
|
|
|
|
/**
|
|
* FeatureSection - A semantic UI component for highlighting a feature.
|
|
* Encapsulates layout and styling.
|
|
*/
|
|
export function FeatureSection({
|
|
heading,
|
|
description,
|
|
mockup,
|
|
layout = 'text-left',
|
|
intent = 'primary',
|
|
}: FeatureSectionProps) {
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Glow
|
|
color={intent}
|
|
size="lg"
|
|
position={layout === 'text-left' ? 'bottom-left' : 'top-right'}
|
|
opacity={0.02}
|
|
/>
|
|
|
|
<Container>
|
|
<Box
|
|
display="grid"
|
|
gridCols={{ base: 1, lg: 2 }}
|
|
gap={12}
|
|
alignItems="center"
|
|
>
|
|
{/* Text Content */}
|
|
<Box
|
|
display="flex"
|
|
flexDirection="col"
|
|
gap={8}
|
|
order={layout === 'text-right' ? { base: 1, lg: 2 } : 1}
|
|
>
|
|
<Heading level={2} weight="bold">
|
|
{heading}
|
|
</Heading>
|
|
<Box display="flex" flexDirection="col" gap={6}>
|
|
{description}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Mockup Area */}
|
|
<Box
|
|
order={layout === 'text-right' ? { base: 2, lg: 1 } : 2}
|
|
bg="rgba(255, 255, 255, 0.02)"
|
|
rounded="xl"
|
|
padding={8}
|
|
border
|
|
borderColor="var(--ui-color-border-muted)"
|
|
>
|
|
{mockup}
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|