francy51
17de3dd72d
- add 3Y/5Y/10Y financial history filtering and reorganize normalization details UI - add new fiscal taxonomy surface/income bridge/KPI packs and update Rust taxonomy loading - auto-detect Homebrew SQLite for native `sqlite-vec` in local dev/e2e with docs and env guidance
96 lines
2.2 KiB
TypeScript
96 lines
2.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type PanelVariant = "flat" | "surface";
|
|
type PanelDensity = "normal" | "compact" | "dense";
|
|
|
|
type PanelProps = {
|
|
title?: string;
|
|
subtitle?: string;
|
|
actions?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
variant?: PanelVariant;
|
|
density?: PanelDensity;
|
|
};
|
|
|
|
const densityStyles: Record<PanelDensity, string> = {
|
|
normal: "",
|
|
compact: "",
|
|
dense: "",
|
|
};
|
|
|
|
const headerDensityStyles: Record<PanelDensity, string> = {
|
|
normal: "mb-4",
|
|
compact: "mb-3",
|
|
dense: "mb-2",
|
|
};
|
|
|
|
export function Panel({
|
|
title,
|
|
subtitle,
|
|
actions,
|
|
children,
|
|
className,
|
|
variant = "flat",
|
|
density = "normal",
|
|
}: PanelProps) {
|
|
const surfaceStyles =
|
|
density === "normal"
|
|
? "p-4 sm:p-5"
|
|
: density === "compact"
|
|
? "p-3 sm:p-4"
|
|
: "p-2.5 sm:p-3";
|
|
|
|
const flatStyles =
|
|
density === "normal"
|
|
? "pt-4 sm:pt-5"
|
|
: density === "compact"
|
|
? "pt-3 sm:pt-4"
|
|
: "pt-2.5 sm:pt-3";
|
|
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"min-w-0",
|
|
variant === "surface"
|
|
? cn(
|
|
"rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)]",
|
|
surfaceStyles,
|
|
)
|
|
: cn("border-t border-[color:var(--line-weak)]", flatStyles),
|
|
densityStyles[density],
|
|
className,
|
|
)}
|
|
>
|
|
{title || subtitle || actions ? (
|
|
<header
|
|
className={cn(
|
|
"flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between",
|
|
headerDensityStyles[density],
|
|
)}
|
|
>
|
|
<div className="min-w-0">
|
|
{title ? (
|
|
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
|
{title}
|
|
</h3>
|
|
) : null}
|
|
{subtitle ? (
|
|
<p
|
|
className={cn(
|
|
"text-xs text-[color:var(--terminal-muted)]",
|
|
title ? "mt-0.5" : "",
|
|
)}
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
{actions ? <div className="w-full sm:w-auto">{actions}</div> : null}
|
|
</header>
|
|
) : null}
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|