82 lines
2.7 KiB
JavaScript
82 lines
2.7 KiB
JavaScript
|
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>
|
||
|
|
);
|
||
|
|
}
|