53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
|
|
export interface SectionHeaderProps {
|
|
title: string;
|
|
description?: string;
|
|
actions?: ReactNode;
|
|
loading?: ReactNode;
|
|
variant?: 'default' | 'minimal';
|
|
}
|
|
|
|
export const SectionHeader = ({
|
|
title,
|
|
description,
|
|
actions,
|
|
loading,
|
|
variant = 'default'
|
|
}: SectionHeaderProps) => {
|
|
const isMinimal = variant === 'minimal';
|
|
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
paddingBottom={isMinimal ? 0 : 4}
|
|
style={isMinimal ? {} : { borderBottom: '1px solid var(--ui-color-border-muted)' }}
|
|
marginBottom={isMinimal ? 4 : 6}
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="between">
|
|
<Box>
|
|
<Heading level={isMinimal ? 3 : 2} weight="bold">{title}</Heading>
|
|
{description && (
|
|
<Text size={isMinimal ? 'xs' : 'sm'} variant="low" block marginTop={1}>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
{actions && (
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
{actions}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
{loading && (
|
|
<Box position="absolute" bottom={0} left={0} fullWidth>
|
|
{loading}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|