52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Stack } from './primitives/Stack';
|
|
import { Text } from './Text';
|
|
import { Surface } from './primitives/Surface';
|
|
import { Icon } from './Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface SectionHeaderProps {
|
|
title: string;
|
|
description?: string;
|
|
icon?: LucideIcon;
|
|
color?: string;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function SectionHeader({ title, description, icon, color = 'text-primary-blue', actions }: SectionHeaderProps) {
|
|
return (
|
|
<Box
|
|
p={5}
|
|
borderBottom
|
|
borderColor="border-white/5"
|
|
style={{ background: 'linear-gradient(to right, rgba(38, 38, 38, 0.3), transparent)' }}
|
|
>
|
|
<Stack direction="row" align="center" justify="between" wrap gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
{icon && (
|
|
<Surface variant="muted" rounded="lg" p={2} bg="bg-white/5">
|
|
<Icon icon={icon} size={5} color={color} />
|
|
</Surface>
|
|
)}
|
|
<Box>
|
|
<Text size="lg" weight="bold" color="text-white" block>
|
|
{title}
|
|
</Text>
|
|
{description && (
|
|
<Text size="sm" color="text-gray-400" block>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Stack>
|
|
{actions && (
|
|
<Box>
|
|
{actions}
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|