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
90 lines
2.0 KiB
TypeScript
90 lines
2.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type MetricCardSize = "default" | "compact" | "inline";
|
|
|
|
type MetricCardProps = {
|
|
label: string;
|
|
value: string;
|
|
delta?: string;
|
|
positive?: boolean;
|
|
className?: string;
|
|
size?: MetricCardSize;
|
|
};
|
|
|
|
export function MetricCard({
|
|
label,
|
|
value,
|
|
delta,
|
|
positive = true,
|
|
className,
|
|
size = "default",
|
|
}: MetricCardProps) {
|
|
if (size === "inline") {
|
|
return (
|
|
<div className={cn("index-card", className)}>
|
|
<p className="label">{label}</p>
|
|
<p className="value">{value}</p>
|
|
{delta ? (
|
|
<p className={cn("delta", positive ? "positive" : "negative")}>
|
|
{delta}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (size === "compact") {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"min-w-0 border-t border-[color:var(--line-weak)] pt-2",
|
|
className,
|
|
)}
|
|
>
|
|
<p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
|
{label}
|
|
</p>
|
|
<p className="mt-1 text-xl font-semibold text-[color:var(--terminal-bright)]">
|
|
{value}
|
|
</p>
|
|
{delta ? (
|
|
<p
|
|
className={cn(
|
|
"mt-1 text-[10px]",
|
|
positive ? "text-[#96f5bf]" : "text-[#ff9898]",
|
|
)}
|
|
>
|
|
{delta}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"min-w-0 border-t border-[color:var(--line-weak)] pt-3",
|
|
className,
|
|
)}
|
|
>
|
|
<p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
|
|
{label}
|
|
</p>
|
|
<p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">
|
|
{value}
|
|
</p>
|
|
{delta ? (
|
|
<p
|
|
className={cn(
|
|
"mt-2 text-xs",
|
|
positive ? "text-[#96f5bf]" : "text-[#ff9898]",
|
|
)}
|
|
>
|
|
{delta}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|