58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Section } from './Section';
|
|
import { Container } from './Container';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
import { Grid } from './Grid';
|
|
|
|
interface DiscoverySectionProps {
|
|
title: string;
|
|
subtitle: string;
|
|
description: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* DiscoverySection - A semantic section for discovering content.
|
|
*/
|
|
export function DiscoverySection({
|
|
title,
|
|
subtitle,
|
|
description,
|
|
children,
|
|
}: DiscoverySectionProps) {
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Container>
|
|
<Box maxWidth="2xl" marginBottom={16}>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
borderLeft
|
|
borderStyle="solid"
|
|
borderWidth="2px"
|
|
borderColor="var(--ui-color-intent-primary)"
|
|
paddingLeft={4}
|
|
marginBottom={4}
|
|
>
|
|
<Text size="xs" weight="bold" uppercase letterSpacing="widest" variant="primary">
|
|
{subtitle}
|
|
</Text>
|
|
</Box>
|
|
<Heading level={2} weight="bold" marginBottom={6}>
|
|
{title}
|
|
</Heading>
|
|
<Text size="lg" variant="low" leading="relaxed">
|
|
{description}
|
|
</Text>
|
|
</Box>
|
|
|
|
<Grid cols={{ base: 1, lg: 3 }} gap={8}>
|
|
{children}
|
|
</Grid>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|