57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
import { Surface } from './primitives/Surface';
|
|
|
|
export interface PageHeroProps {
|
|
title: string;
|
|
description?: string;
|
|
children?: ReactNode;
|
|
image?: ReactNode;
|
|
}
|
|
|
|
export const PageHero = ({
|
|
title,
|
|
description,
|
|
children,
|
|
image
|
|
}: PageHeroProps) => {
|
|
return (
|
|
<Surface
|
|
variant="dark"
|
|
rounded="xl"
|
|
padding={8}
|
|
style={{ position: 'relative', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)' }}
|
|
>
|
|
<Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems="center" gap={8}>
|
|
<Box flex={1}>
|
|
<Heading level={1} marginBottom={4}>{title}</Heading>
|
|
{description && (
|
|
<Text size="lg" variant="low" marginBottom={6} block>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
{children}
|
|
</Box>
|
|
{image && (
|
|
<Box flex={1} display="flex" justifyContent="center">
|
|
{image}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Decorative elements */}
|
|
<Box
|
|
position="absolute"
|
|
top="-4rem"
|
|
right="-4rem"
|
|
width="16rem"
|
|
height="16rem"
|
|
bg="var(--ui-color-intent-primary)"
|
|
style={{ opacity: 0.05, filter: 'blur(64px)', borderRadius: '9999px' }}
|
|
/>
|
|
</Surface>
|
|
);
|
|
};
|