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
27 lines
577 B
TypeScript
27 lines
577 B
TypeScript
"use client";
|
|
|
|
import { X } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type FilterChipProps = {
|
|
label: string;
|
|
onRemove: () => void;
|
|
className?: string;
|
|
};
|
|
|
|
export function FilterChip({ label, onRemove, className }: FilterChipProps) {
|
|
return (
|
|
<span className={cn("filter-chip", className)}>
|
|
<span className="truncate">{label}</span>
|
|
<button
|
|
type="button"
|
|
onClick={onRemove}
|
|
className="remove"
|
|
aria-label={`Remove ${label} filter`}
|
|
>
|
|
<X className="size-3" />
|
|
</button>
|
|
</span>
|
|
);
|
|
}
|