43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Surface } from './primitives/Surface';
|
|
import { Box } from './primitives/Box';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
|
|
export interface PanelProps {
|
|
title?: string;
|
|
description?: string;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
variant?: 'default' | 'dark' | 'muted';
|
|
}
|
|
|
|
export const Panel = ({
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
variant = 'default'
|
|
}: PanelProps) => {
|
|
return (
|
|
<Surface variant={variant} rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)' }}>
|
|
{(title || description) && (
|
|
<Box padding={6} borderBottom>
|
|
{title && <Heading level={3} marginBottom={1}>{title}</Heading>}
|
|
{description && <Text size="sm" variant="low">{description}</Text>}
|
|
</Box>
|
|
)}
|
|
|
|
<Box padding={6}>
|
|
{children}
|
|
</Box>
|
|
|
|
{footer && (
|
|
<Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
|
|
{footer}
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
};
|