61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { ReactNode } from 'react';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
export interface TeamHeroProps {
|
|
title: ReactNode;
|
|
description: string;
|
|
stats?: ReactNode;
|
|
actions?: ReactNode;
|
|
sideContent?: ReactNode;
|
|
}
|
|
|
|
export function TeamHero({
|
|
title,
|
|
description,
|
|
stats,
|
|
actions,
|
|
sideContent
|
|
}: TeamHeroProps) {
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
backgroundColor="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" />
|
|
|
|
<Stack direction={{ base: 'col', lg: 'row' }} gap={12} align="start">
|
|
<Stack flex={1} gap={4}>
|
|
<Heading level={1} size="4xl" weight="bold">
|
|
{title}
|
|
</Heading>
|
|
<Text size="lg" variant="low" block leading="relaxed" marginBottom={4}>
|
|
{description}
|
|
</Text>
|
|
|
|
{stats && <Box marginBottom={4}>{stats}</Box>}
|
|
|
|
{actions && (
|
|
<Stack direction="row" gap={4} wrap>
|
|
{actions}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
|
|
{sideContent && (
|
|
<Box width={{ base: '100%', lg: '24rem' }} flexShrink={0}>
|
|
{sideContent}
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|