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
46 lines
916 B
TypeScript
46 lines
916 B
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type IndexCardProps = {
|
|
label: string;
|
|
value: string;
|
|
delta?: string;
|
|
positive?: boolean;
|
|
};
|
|
|
|
type IndexCardRowProps = {
|
|
cards: IndexCardProps[];
|
|
className?: string;
|
|
};
|
|
|
|
const IndexCard = memo(function IndexCard({
|
|
label,
|
|
value,
|
|
delta,
|
|
positive = true,
|
|
}: IndexCardProps) {
|
|
return (
|
|
<div className="index-card">
|
|
<p className="label">{label}</p>
|
|
<p className="value">{value}</p>
|
|
{delta ? (
|
|
<p className={cn("delta", positive ? "positive" : "negative")}>
|
|
{delta}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export function IndexCardRow({ cards, className }: IndexCardRowProps) {
|
|
return (
|
|
<div className={cn("index-card-row", className)}>
|
|
{cards.map((card, index) => (
|
|
<IndexCard key={`${card.label}-${index}`} {...card} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|