48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
import { Heading } from './Heading';
|
|
import { Surface } from './Surface';
|
|
import { Icon } from './Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface SectionHeaderProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description?: string;
|
|
action?: React.ReactNode;
|
|
color?: string;
|
|
}
|
|
|
|
export function SectionHeader({
|
|
icon,
|
|
title,
|
|
description,
|
|
action,
|
|
color = '#3b82f6'
|
|
}: SectionHeaderProps) {
|
|
return (
|
|
<Box p={5} style={{ borderBottom: '1px solid #262626', background: 'linear-gradient(to right, rgba(38, 38, 38, 0.3), transparent)' }}>
|
|
<Stack direction="row" align="center" justify="between" wrap gap={4}>
|
|
<Box>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)' }}>
|
|
<Icon icon={icon} size={5} color={color} />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={2}>{title}</Heading>
|
|
{description && (
|
|
<Text size="sm" color="text-gray-500" block mt={1}>{description}</Text>
|
|
)}
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
{action && <Box>{action}</Box>}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|