35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
type PanelProps = {
|
|
title?: string;
|
|
subtitle?: string;
|
|
actions?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
variant?: 'flat' | 'surface';
|
|
};
|
|
|
|
export function Panel({ title, subtitle, actions, children, className, variant = 'flat' }: PanelProps) {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
variant === 'surface'
|
|
? 'min-w-0 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-4 shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)] sm:p-5'
|
|
: 'min-w-0 border-t border-[color:var(--line-weak)] pt-4 sm:pt-5',
|
|
className
|
|
)}
|
|
>
|
|
{(title || subtitle || actions) ? (
|
|
<header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="min-w-0">
|
|
{title ? <h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3> : null}
|
|
{subtitle ? <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p> : null}
|
|
</div>
|
|
{actions ? <div className="w-full sm:w-auto">{actions}</div> : null}
|
|
</header>
|
|
) : null}
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|