Extract CardDetailQuantityModal from card detail page (Brief 1). (#81)
Moves owned-quantity modal markup into components/CardDetailQuantityModal.js. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
varutasu
GitHub
parent
91b481ffa4
commit
5582638935
2 changed files with 90 additions and 60 deletions
81
components/CardDetailQuantityModal.js
Normal file
81
components/CardDetailQuantityModal.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
|
||||||
import Layout from '../../components/Layout';
|
import Layout from '../../components/Layout';
|
||||||
import { useAuth } from '../../lib/use-auth';
|
import { useAuth } from '../../lib/use-auth';
|
||||||
import CollectionSelectionModal from '../../components/CollectionSelectionModal';
|
import CollectionSelectionModal from '../../components/CollectionSelectionModal';
|
||||||
|
import CardDetailQuantityModal from '../../components/CardDetailQuantityModal';
|
||||||
import { ManaCost, ColorIdentity, AdvancedManaCost } from '../../components/ManaSymbols';
|
import { ManaCost, ColorIdentity, AdvancedManaCost } from '../../components/ManaSymbols';
|
||||||
import ManaSymbolSettings from '../../components/ManaSymbolSettings';
|
import ManaSymbolSettings from '../../components/ManaSymbolSettings';
|
||||||
import { VOCAB, collectionDisplayName } from '../../lib/collection-vocabulary.js';
|
import { VOCAB, collectionDisplayName } from '../../lib/collection-vocabulary.js';
|
||||||
|
|
@ -763,66 +764,14 @@ export default function CardDetail() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Quantity Modal */}
|
<CardDetailQuantityModal
|
||||||
{showQuantityModal && (
|
isOpen={showQuantityModal}
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
ownedQuantity={ownedQuantity}
|
||||||
<div className="bg-white rounded-2xl p-6 max-w-md w-full mx-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
|
quantity={quantity}
|
||||||
<h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
|
onQuantityChange={setQuantity}
|
||||||
{ownedQuantity > 0 ? 'Update Quantity' : VOCAB.ADD_TO_MY_COLLECTION}
|
onConfirm={handleOwnershipUpdate}
|
||||||
</h3>
|
onClose={() => setShowQuantityModal(false)}
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Collection Selection Modal */}
|
{/* Collection Selection Modal */}
|
||||||
<CollectionSelectionModal
|
<CollectionSelectionModal
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue