58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Glow } from './Glow';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
|
|
export interface TeamHeroProps {
|
|
title: ReactNode;
|
|
description: string;
|
|
stats?: ReactNode;
|
|
actions?: ReactNode;
|
|
sideContent?: ReactNode;
|
|
}
|
|
|
|
export const TeamHero = ({
|
|
title,
|
|
description,
|
|
stats,
|
|
actions,
|
|
sideContent
|
|
}: TeamHeroProps) => {
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
bg="var(--ui-color-bg-base)"
|
|
paddingY={12}
|
|
style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
|
|
>
|
|
<Glow color="purple" size="xl" opacity={0.05} position="top-right" />
|
|
|
|
<Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={12} alignItems="start">
|
|
<Box flex={1}>
|
|
<Heading level={1} size="4xl" weight="bold" marginBottom={4}>
|
|
{title}
|
|
</Heading>
|
|
<Text size="lg" variant="low" block marginBottom={8} leading="relaxed">
|
|
{description}
|
|
</Text>
|
|
|
|
{stats && <Box marginBottom={8}>{stats}</Box>}
|
|
|
|
{actions && (
|
|
<Box display="flex" gap={4} flexWrap="wrap">
|
|
{actions}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{sideContent && (
|
|
<Box width={{ base: '100%', lg: '24rem' }} flexShrink={0}>
|
|
{sideContent}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|