francy51
ca45d8ea4c
- Add compact/dense CSS tokens for tighter layouts - Add size prop to Button (default/compact) and Input (default/compact) - Add density prop to Panel (normal/compact/dense) - Add size prop to MetricCard (default/compact/inline) - Create IndexCardRow component for horizontal metric display - Create FilterChip component for removable filter tags - Redesign Command Center with flat sections, reduced cards - Tighten AppShell spacing (sidebar w-56, header mb-3, main space-y-4) Design goals achieved: - Denser, cleaner terminal-style layout - Reduced card usage in favor of flat sections with dividers - More space-efficient controls and metrics - Better use of widescreen layouts
96 lines
2.3 KiB
TypeScript
96 lines
2.3 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-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)]",
|
|
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>
|
|
);
|
|
}
|