54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box, Spacing } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface PanelProps {
|
|
title?: string;
|
|
description?: string;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
variant?: 'default' | 'dark' | 'muted';
|
|
padding?: Spacing;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export const Panel = ({
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
variant = 'default',
|
|
padding = 6,
|
|
actions
|
|
}: PanelProps) => {
|
|
return (
|
|
<Surface variant={variant} rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)' }}>
|
|
{(title || description || actions) && (
|
|
<Box padding={padding as any} borderBottom display="flex" alignItems="center" justifyContent="between">
|
|
<Box>
|
|
{title && <Heading level={3} marginBottom={1}>{title}</Heading>}
|
|
{description && <Text size="sm" variant="low">{description}</Text>}
|
|
</Box>
|
|
{actions && (
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
{actions}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)}
|
|
|
|
<Box padding={padding as any}>
|
|
{children}
|
|
</Box>
|
|
|
|
{footer && (
|
|
<Box padding={padding as any} borderTop bg="rgba(255,255,255,0.02)">
|
|
{footer}
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
};
|