32 lines
1002 B
TypeScript
32 lines
1002 B
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
type PanelProps = {
|
|
title?: string;
|
|
subtitle?: string;
|
|
actions?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function Panel({ title, subtitle, actions, children, className }: PanelProps) {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
'rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_0_0_1px_rgba(0,255,180,0.03),0_12px_30px_rgba(1,4,10,0.45)]',
|
|
className
|
|
)}
|
|
>
|
|
{(title || subtitle || actions) ? (
|
|
<header className="mb-4 flex items-start justify-between gap-3">
|
|
<div>
|
|
{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>{actions}</div> : null}
|
|
</header>
|
|
) : null}
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|