cc1598962e
Move Commander basic-land checks and deck aggregate metrics into lib/deck-builder-stats.js with unit tests; render the summary row via DeckBuilderStatsBar to shrink the page god-component. Co-authored-by: Cursor <cursoragent@cursor.com>
30 lines
1.2 KiB
JavaScript
30 lines
1.2 KiB
JavaScript
/**
|
|
* Summary metrics row for the deck builder main panel.
|
|
* @param {{ stats: { totalCards: number, avgCmc: string|number, colorCounts: object, typeCounts: object } }} props
|
|
*/
|
|
export default function DeckBuilderStatsBar({ stats }) {
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6 p-4 bg-bg-primary rounded-lg">
|
|
<div className="text-center">
|
|
<div className="text-lg font-bold text-text-primary">{stats.totalCards}/100</div>
|
|
<div className="text-text-secondary text-sm">Cards</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-lg font-bold text-text-primary">{stats.avgCmc}</div>
|
|
<div className="text-text-secondary text-sm">Avg CMC</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-lg font-bold text-text-primary">
|
|
{Object.keys(stats.colorCounts).length}
|
|
</div>
|
|
<div className="text-text-secondary text-sm">Colors</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-lg font-bold text-text-primary">
|
|
{Object.keys(stats.typeCounts).length}
|
|
</div>
|
|
<div className="text-text-secondary text-sm">Types</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|