95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
|
|
export interface PanelProps {
|
|
title?: string;
|
|
description?: string;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
variant?: 'default' | 'muted' | 'ghost' | 'dark' | any;
|
|
padding?: 'none' | 'sm' | 'md' | 'lg' | number | any;
|
|
actions?: ReactNode;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
border?: boolean;
|
|
rounded?: string;
|
|
borderColor?: string;
|
|
bg?: string;
|
|
}
|
|
|
|
/**
|
|
* Panel - Redesigned for "Modern Precision" theme.
|
|
* Includes compatibility props to prevent app-wide breakage.
|
|
*/
|
|
export const Panel = ({
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
variant = 'default',
|
|
padding = 'md',
|
|
actions,
|
|
className,
|
|
style,
|
|
border,
|
|
rounded,
|
|
borderColor,
|
|
bg,
|
|
}: PanelProps) => {
|
|
const variantClasses = {
|
|
default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)]',
|
|
muted: 'bg-[var(--ui-color-bg-surface-muted)] border-[var(--ui-color-border-muted)]',
|
|
ghost: 'bg-transparent border-transparent',
|
|
dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
|
|
};
|
|
|
|
const paddingClasses = {
|
|
none: 'p-0',
|
|
sm: 'p-2',
|
|
md: 'p-4',
|
|
lg: 'p-8',
|
|
};
|
|
|
|
const getPaddingClass = (pad: any) => {
|
|
if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md;
|
|
return ''; // Handled in style
|
|
};
|
|
|
|
const combinedStyle: React.CSSProperties = {
|
|
...style,
|
|
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
|
|
...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
|
|
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
|
|
...(border === false ? { border: 'none' } : {}),
|
|
};
|
|
|
|
return (
|
|
<div className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} transition-all duration-200 ${className || ''}`} style={combinedStyle}>
|
|
{(title || description || actions) && (
|
|
<div className={`border-b border-[var(--ui-color-border-muted)] flex items-center justify-between ${getPaddingClass(padding)}`}>
|
|
<div>
|
|
{title && <Heading level={4} weight="semibold" uppercase>{title}</Heading>}
|
|
{description && <Text size="xs" variant="low">{description}</Text>}
|
|
</div>
|
|
{actions && (
|
|
<div className="flex items-center gap-2">
|
|
{actions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className={typeof padding === 'number' ? '' : getPaddingClass(padding)}>
|
|
{children}
|
|
</div>
|
|
|
|
{footer && (
|
|
<div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${getPaddingClass(padding)}`}>
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|