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
88 lines
1.9 KiB
TypeScript
88 lines
1.9 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="text-[11px] 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="text-xs text-[color:var(--terminal-muted)]">{label}</p>
|
|
<p className="mt-2 text-2xl 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>
|
|
);
|
|
}
|