85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
|
import DecksCreateModal from './DecksCreateModal';
|
||
|
|
import DecksEditModal from './DecksEditModal';
|
||
|
|
import DecksGrid from './DecksGrid';
|
||
|
|
import { Button } from './ui';
|
||
|
|
|
||
|
|
export default function DecksPageView({
|
||
|
|
decks,
|
||
|
|
editingDeck,
|
||
|
|
handleCreateDeck,
|
||
|
|
handleDeleteDeck,
|
||
|
|
handleEditDeck,
|
||
|
|
newDeck,
|
||
|
|
setEditingDeck,
|
||
|
|
setNewDeck,
|
||
|
|
setShowCreateModal,
|
||
|
|
showCreateModal,
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
|
|
<div className="flex justify-between items-center mb-8">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
My Decks
|
||
|
|
</h1>
|
||
|
|
<p className="mt-2" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
Build and manage your MTG decks
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
|
||
|
|
Create New Deck
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||
|
|
<div className="glass-panel rounded-2xl p-6">
|
||
|
|
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{decks.length}
|
||
|
|
</div>
|
||
|
|
<div style={{ color: 'var(--text-secondary)' }}>Total Decks</div>
|
||
|
|
</div>
|
||
|
|
<div className="glass-panel rounded-2xl p-6">
|
||
|
|
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{decks.filter((d) => d.format === 'Commander').length}
|
||
|
|
</div>
|
||
|
|
<div style={{ color: 'var(--text-secondary)' }}>Commander</div>
|
||
|
|
</div>
|
||
|
|
<div className="glass-panel rounded-2xl p-6">
|
||
|
|
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{decks.filter((d) => d.is_public).length}
|
||
|
|
</div>
|
||
|
|
<div style={{ color: 'var(--text-secondary)' }}>Public</div>
|
||
|
|
</div>
|
||
|
|
<div className="glass-panel rounded-2xl p-6">
|
||
|
|
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{decks.reduce((sum, deck) => sum + (deck.card_count || 0), 0)}
|
||
|
|
</div>
|
||
|
|
<div style={{ color: 'var(--text-secondary)' }}>Total Cards</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<DecksGrid
|
||
|
|
decks={decks}
|
||
|
|
onEditDeck={setEditingDeck}
|
||
|
|
onDeleteDeck={handleDeleteDeck}
|
||
|
|
onCreateDeck={() => setShowCreateModal(true)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<DecksCreateModal
|
||
|
|
isOpen={showCreateModal}
|
||
|
|
onClose={() => setShowCreateModal(false)}
|
||
|
|
newDeck={newDeck}
|
||
|
|
setNewDeck={setNewDeck}
|
||
|
|
onCreate={handleCreateDeck}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<DecksEditModal
|
||
|
|
editingDeck={editingDeck}
|
||
|
|
setEditingDeck={setEditingDeck}
|
||
|
|
onClose={() => setEditingDeck(null)}
|
||
|
|
onEdit={handleEditDeck}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|