108 lines
4 KiB
JavaScript
108 lines
4 KiB
JavaScript
|
const GROUP_OPTIONS = [
|
||
|
|
{ value: 'type', label: 'Card Type' },
|
||
|
|
{ value: 'cmc', label: 'Mana Cost' },
|
||
|
|
{ value: 'color', label: 'Color' },
|
||
|
|
{ value: 'rarity', label: 'Rarity' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function DeckDetailStatsSidebar({ deck, stats, groupBy, onGroupByChange }) {
|
||
|
|
return (
|
||
|
|
<div className="lg:col-span-1">
|
||
|
|
<div className="glass-panel rounded-2xl p-6 mb-6">
|
||
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
Statistics
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div className="flex justify-between">
|
||
|
|
<span style={{ color: 'var(--text-secondary)' }}>Total Cards:</span>
|
||
|
|
<span className="font-medium" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{stats.totalCards}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between">
|
||
|
|
<span style={{ color: 'var(--text-secondary)' }}>Avg. CMC:</span>
|
||
|
|
<span className="font-medium" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{stats.avgCmc}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between">
|
||
|
|
<span style={{ color: 'var(--text-secondary)' }}>Format:</span>
|
||
|
|
<span className="font-medium" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{deck.format}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{Object.keys(stats.colorCounts).length > 0 && (
|
||
|
|
<div className="mt-6">
|
||
|
|
<h4 className="text-sm font-medium mb-3" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
Color Distribution
|
||
|
|
</h4>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{Object.entries(stats.colorCounts)
|
||
|
|
.sort(([, a], [, b]) => b - a)
|
||
|
|
.map(([color, count]) => (
|
||
|
|
<div key={color} className="flex justify-between items-center">
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<span className="text-lg">{color}</span>
|
||
|
|
<span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{color}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<span className="font-medium" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{count}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{Object.keys(stats.typeCounts).length > 0 && (
|
||
|
|
<div className="mt-6">
|
||
|
|
<h4 className="text-sm font-medium mb-3" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
Card Types
|
||
|
|
</h4>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{Object.entries(stats.typeCounts)
|
||
|
|
.sort(([, a], [, b]) => b - a)
|
||
|
|
.slice(0, 8)
|
||
|
|
.map(([type, count]) => (
|
||
|
|
<div key={type} className="flex justify-between">
|
||
|
|
<span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{type}
|
||
|
|
</span>
|
||
|
|
<span className="font-medium" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{count}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="glass-panel rounded-2xl p-6">
|
||
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
Group Cards By
|
||
|
|
</h3>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{GROUP_OPTIONS.map((option) => (
|
||
|
|
<button
|
||
|
|
key={option.value}
|
||
|
|
type="button"
|
||
|
|
onClick={() => onGroupByChange(option.value)}
|
||
|
|
className={`nav-item w-full text-left px-3 py-2 ${
|
||
|
|
groupBy === option.value ? 'nav-item-active' : 'nav-item-hover'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{option.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|