rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor(card): extract quantity modal (Brief 1) #81

Merged
varutasu merged 1 commit from refactor/card-id-split-brief-1 into main 2026-06-03 17:53:04 -04:00
Conversation 3 Commits 1 Files changed 2 +90 -60
2 changed files with 90 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
components/CardDetailQuantityModal.js Normal file
View file

@ -0,0 +1,81 @@
import { VOCAB } from '../lib/collection-vocabulary.js';
export default function CardDetailQuantityModal({
isOpen,
ownedQuantity,
quantity,
onQuantityChange,
onConfirm,
onClose,
}) {
if (!isOpen) {
return null;
}
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div
className="bg-white rounded-2xl p-6 max-w-md w-full mx-4"
style={{ backgroundColor: 'var(--bg-primary)' }}
>
<h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
{ownedQuantity > 0 ? 'Update Quantity' : VOCAB.ADD_TO_MY_COLLECTION}
</h3>
<div className="mb-6">
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
Quantity
</label>
<div className="flex items-center gap-4">
<button
type="button"
onClick={() => onQuantityChange(Math.max(1, quantity - 1))}
className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
style={{
backgroundColor: 'var(--bg-secondary)',
borderColor: 'var(--border)',
color: 'var(--text-primary)',
}}
>
-
</button>
<span className="text-2xl font-bold px-4" style={{ color: 'var(--text-primary)' }}>
{quantity}
</span>
<button
type="button"
onClick={() => onQuantityChange(quantity + 1)}
className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
style={{
backgroundColor: 'var(--bg-secondary)',
borderColor: 'var(--border)',
color: 'var(--text-primary)',
}}
>
+
</button>
</div>
</div>
<div className="flex gap-3">
<button
type="button"
onClick={() => onConfirm(quantity)}
className="flex-1 px-4 py-2 rounded-xl font-medium gradient-bg-purple text-white hover:shadow-lg transition-all duration-200"
>
{ownedQuantity > 0 ? 'Update' : VOCAB.ADD_TO_MY_COLLECTION}
</button>
<button
type="button"
onClick={onClose}
className="flex-1 px-4 py-2 rounded-xl font-medium border transition-all duration-200"
style={{
borderColor: 'var(--border)',
color: 'var(--text-secondary)',
}}
>
Cancel
</button>
</div>
</div>
</div>
);
}

69
pages/card/[id].js
View file

@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
import Layout from '../../components/Layout';
import { useAuth } from '../../lib/use-auth';
import CollectionSelectionModal from '../../components/CollectionSelectionModal';
import CardDetailQuantityModal from '../../components/CardDetailQuantityModal';
import { ManaCost, ColorIdentity, AdvancedManaCost } from '../../components/ManaSymbols';
import ManaSymbolSettings from '../../components/ManaSymbolSettings';
import { VOCAB, collectionDisplayName } from '../../lib/collection-vocabulary.js';
@ -763,66 +764,14 @@ export default function CardDetail() {
</div>
</div>
{/* Quantity Modal */}
{showQuantityModal && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-2xl p-6 max-w-md w-full mx-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
<h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
{ownedQuantity > 0 ? 'Update Quantity' : VOCAB.ADD_TO_MY_COLLECTION}
</h3>
<div className="mb-6">
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
Quantity
</label>
<div className="flex items-center gap-4">
<button
onClick={() => setQuantity(Math.max(1, quantity - 1))}
className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
style={{
backgroundColor: 'var(--bg-secondary)',
borderColor: 'var(--border)',
color: 'var(--text-primary)'
}}
>
-
</button>
<span className="text-2xl font-bold px-4" style={{ color: 'var(--text-primary)' }}>
{quantity}
</span>
<button
onClick={() => setQuantity(quantity + 1)}
className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
style={{
backgroundColor: 'var(--bg-secondary)',
borderColor: 'var(--border)',
color: 'var(--text-primary)'
}}
>
+
</button>
</div>
</div>
<div className="flex gap-3">
<button
onClick={() => handleOwnershipUpdate(quantity)}
className="flex-1 px-4 py-2 rounded-xl font-medium gradient-bg-purple text-white hover:shadow-lg transition-all duration-200"
>
{ownedQuantity > 0 ? 'Update' : VOCAB.ADD_TO_MY_COLLECTION}
</button>
<button
onClick={() => setShowQuantityModal(false)}
className="flex-1 px-4 py-2 rounded-xl font-medium border transition-all duration-200"
style={{
borderColor: 'var(--border)',
color: 'var(--text-secondary)'
}}
>
Cancel
</button>
</div>
</div>
</div>
)}
<CardDetailQuantityModal
isOpen={showQuantityModal}
ownedQuantity={ownedQuantity}
quantity={quantity}
onQuantityChange={setQuantity}
onConfirm={handleOwnershipUpdate}
onClose={() => setShowQuantityModal(false)}
/>
{/* Collection Selection Modal */}
<CollectionSelectionModal