101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
import React, { ReactNode, CSSProperties } from 'react';
|
|
import { Spacing } from './Box';
|
|
|
|
export interface PanelProps {
|
|
children: ReactNode;
|
|
variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated';
|
|
padding?: Spacing | number;
|
|
onClick?: () => void;
|
|
style?: CSSProperties;
|
|
title?: string | ReactNode;
|
|
actions?: ReactNode;
|
|
description?: string;
|
|
footer?: ReactNode;
|
|
border?: boolean;
|
|
rounded?: string;
|
|
className?: string;
|
|
borderColor?: string;
|
|
bg?: string;
|
|
}
|
|
|
|
export function Panel({
|
|
children,
|
|
variant = 'default',
|
|
padding = 'md',
|
|
onClick,
|
|
style,
|
|
title,
|
|
actions,
|
|
description,
|
|
footer,
|
|
border,
|
|
rounded,
|
|
className
|
|
}: PanelProps) {
|
|
const variantClasses = {
|
|
default: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-sm',
|
|
muted: 'bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-muted)]',
|
|
outline: 'bg-transparent border border-[var(--ui-color-border-default)]',
|
|
glass: 'bg-white/[0.03] backdrop-blur-md border border-white/[0.05]',
|
|
dark: 'bg-[var(--ui-color-bg-base)] border border-[var(--ui-color-border-default)]',
|
|
precision: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)]',
|
|
bordered: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)]',
|
|
elevated: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-md',
|
|
};
|
|
|
|
const paddingClasses = {
|
|
none: 'p-0',
|
|
xs: 'p-2',
|
|
sm: 'p-4',
|
|
md: 'p-6',
|
|
lg: 'p-10',
|
|
};
|
|
|
|
const getPaddingClass = (p: any) => {
|
|
if (typeof p === 'string') return `p-${p}`;
|
|
return '';
|
|
};
|
|
|
|
const interactiveClasses = onClick
|
|
? 'cursor-pointer hover:border-[var(--ui-color-border-bright)] transition-all duration-200 ease-in-out active:scale-[0.99]'
|
|
: '';
|
|
|
|
return (
|
|
<div
|
|
className={`${variantClasses[variant]} ${getPaddingClass(padding)} ${interactiveClasses} ${rounded ? `rounded-${rounded}` : 'rounded-md'} ${border ? 'border' : ''} ${className || ''}`}
|
|
onClick={onClick}
|
|
style={{
|
|
...style,
|
|
...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {})
|
|
}}
|
|
>
|
|
{(title || actions) && (
|
|
<div className="flex items-center justify-between mb-6 border-b border-[var(--ui-color-border-muted)] pb-4">
|
|
{title && (
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-1 h-4 bg-[var(--ui-color-intent-primary)]" />
|
|
<h3 className="text-xs font-bold uppercase tracking-widest text-[var(--ui-color-text-high)]">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
{description && (
|
|
<p className="text-[10px] text-[var(--ui-color-text-low)] uppercase mono ml-3">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
{actions && <div>{actions}</div>}
|
|
</div>
|
|
)}
|
|
{children}
|
|
{footer && (
|
|
<div className="mt-6 pt-4 border-t border-[var(--ui-color-border-muted)]">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|