72 lines
1.7 KiB
TypeScript
72 lines
1.7 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;
|
|
className?: string;
|
|
border?: boolean;
|
|
rounded?: string;
|
|
borderColor?: string;
|
|
bg?: string;
|
|
}
|
|
|
|
export const Panel = ({
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
variant = 'default',
|
|
padding = 6,
|
|
actions,
|
|
className,
|
|
border,
|
|
rounded,
|
|
borderColor,
|
|
bg
|
|
}: PanelProps) => {
|
|
return (
|
|
<Surface
|
|
variant={variant}
|
|
rounded={(rounded as any) || "lg"}
|
|
style={{
|
|
border: border === false ? 'none' : `1px solid ${borderColor || 'var(--ui-color-border-default)'}`,
|
|
backgroundColor: bg ? (bg.startsWith('bg-') ? undefined : bg) : undefined
|
|
}}
|
|
className={className}
|
|
>
|
|
{(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>
|
|
);
|
|
};
|