francy51
f4a0014572
- Group toolbar controls by function (Statement, Period, Mode, Scale) - Move Trend Chart above Matrix, hidden by default - Add chart toggle to toolbar actions - Flatten all sections: remove card styling, use subtle dividers - Update StatementRowInspector and NormalizationSummary with flat layout
48 lines
949 B
TypeScript
48 lines
949 B
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type IndexCardProps = {
|
|
label: string;
|
|
value: string;
|
|
delta?: string;
|
|
positive?: boolean;
|
|
};
|
|
|
|
export type { IndexCardProps };
|
|
|
|
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>
|
|
);
|
|
}
|