Enhance TradeCreator with mobile navigation and gift mode functionality
This commit is contained in:
Matthieu
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, ArrowLeftRight, Plus, Minus, Send, Gift, Loader2 } from 'lucide-react';
|
||||
import { X, ArrowLeftRight, ArrowRight, ArrowLeft, Minus, Send, Gift, Loader2, Check } from 'lucide-react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { getUserCollection, getCardsByIds } from '../services/api';
|
||||
@@ -25,6 +25,8 @@ interface SelectedCard {
|
||||
maxQuantity: number;
|
||||
}
|
||||
|
||||
type MobileStep = 'want' | 'give' | 'review';
|
||||
|
||||
export default function TradeCreator({
|
||||
receiverId,
|
||||
receiverUsername,
|
||||
@@ -39,6 +41,10 @@ export default function TradeCreator({
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
// Mobile step state
|
||||
const [isGiftMode, setIsGiftMode] = useState(false);
|
||||
const [mobileStep, setMobileStep] = useState<MobileStep>('want');
|
||||
|
||||
// Cards I'm offering (from my collection)
|
||||
const [myOfferedCards, setMyOfferedCards] = useState<Map<string, SelectedCard>>(new Map());
|
||||
// Cards I want (from their collection)
|
||||
@@ -48,6 +54,16 @@ export default function TradeCreator({
|
||||
loadMyCollection();
|
||||
}, [user]);
|
||||
|
||||
// When gift mode is toggled, adjust mobile step
|
||||
useEffect(() => {
|
||||
if (isGiftMode) {
|
||||
setWantedCards(new Map());
|
||||
setMobileStep('give');
|
||||
} else {
|
||||
setMobileStep('want');
|
||||
}
|
||||
}, [isGiftMode]);
|
||||
|
||||
const loadMyCollection = async () => {
|
||||
if (!user) return;
|
||||
setLoading(true);
|
||||
@@ -133,7 +149,6 @@ export default function TradeCreator({
|
||||
const handleSubmit = async () => {
|
||||
if (!user) return;
|
||||
|
||||
// At least one side should have cards (allowing gifts)
|
||||
if (myOfferedCards.size === 0 && wantedCards.size === 0) {
|
||||
toast.warning('Please select at least one card to trade or gift');
|
||||
return;
|
||||
@@ -171,179 +186,445 @@ export default function TradeCreator({
|
||||
const isGift = myOfferedCards.size > 0 && wantedCards.size === 0;
|
||||
const isRequest = myOfferedCards.size === 0 && wantedCards.size > 0;
|
||||
|
||||
// Mobile navigation
|
||||
const goToNextStep = () => {
|
||||
if (mobileStep === 'want') setMobileStep('give');
|
||||
else if (mobileStep === 'give') setMobileStep('review');
|
||||
};
|
||||
|
||||
const goToPrevStep = () => {
|
||||
if (mobileStep === 'review') setMobileStep('give');
|
||||
else if (mobileStep === 'give' && !isGiftMode) setMobileStep('want');
|
||||
};
|
||||
|
||||
const canGoNext = () => {
|
||||
if (mobileStep === 'want') return true; // Can skip wanting cards (request nothing)
|
||||
if (mobileStep === 'give') return true; // Can skip giving cards (gift request)
|
||||
return false;
|
||||
};
|
||||
|
||||
const canSubmit = myOfferedCards.size > 0 || wantedCards.size > 0;
|
||||
|
||||
// Collection grid component
|
||||
const CollectionGrid = ({
|
||||
items,
|
||||
selectedCards,
|
||||
onAdd,
|
||||
onRemove,
|
||||
emptyMessage,
|
||||
selectionColor,
|
||||
}: {
|
||||
items: CollectionItem[];
|
||||
selectedCards: Map<string, SelectedCard>;
|
||||
onAdd: (card: Card, maxQty: number) => void;
|
||||
onRemove: (cardId: string) => void;
|
||||
emptyMessage: string;
|
||||
selectionColor: 'green' | 'blue';
|
||||
}) => {
|
||||
if (items.length === 0) {
|
||||
return <p className="text-gray-400 text-center py-8">{emptyMessage}</p>;
|
||||
}
|
||||
|
||||
const ringColor = selectionColor === 'green' ? 'ring-green-500' : 'ring-blue-500';
|
||||
const badgeColor = selectionColor === 'green' ? 'bg-green-600' : 'bg-blue-500';
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-gray-800 rounded-lg w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<ArrowLeftRight size={24} className="text-blue-400" />
|
||||
<h2 className="text-xl font-bold">Trade with {receiverUsername}</h2>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
|
||||
{items.map(({ card, quantity }) => {
|
||||
const selected = selectedCards.get(card.id);
|
||||
const remainingQty = quantity - (selected?.quantity || 0);
|
||||
return (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`relative cursor-pointer rounded-lg overflow-hidden transition active:scale-95 ${
|
||||
selected ? `ring-2 ${ringColor}` : 'active:ring-2 active:ring-gray-500'
|
||||
}`}
|
||||
onClick={() => remainingQty > 0 && onAdd(card, quantity)}
|
||||
>
|
||||
<img
|
||||
src={card.image_uris?.small || card.image_uris?.normal}
|
||||
alt={card.name}
|
||||
className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
|
||||
/>
|
||||
<div className="absolute top-1 right-1 bg-gray-900/80 text-white text-[10px] px-1 py-0.5 rounded">
|
||||
{remainingQty}/{quantity}
|
||||
</div>
|
||||
{selected && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove(card.id);
|
||||
}}
|
||||
className={`absolute bottom-1 left-1 ${badgeColor} text-white text-[10px] px-1.5 py-0.5 rounded flex items-center gap-0.5`}
|
||||
>
|
||||
+{selected.quantity}
|
||||
<Minus size={10} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Selected cards summary component
|
||||
const SelectedCardsSummary = ({
|
||||
cards,
|
||||
onRemove,
|
||||
label,
|
||||
emptyLabel,
|
||||
color,
|
||||
}: {
|
||||
cards: Map<string, SelectedCard>;
|
||||
onRemove: (cardId: string) => void;
|
||||
label: string;
|
||||
emptyLabel: string;
|
||||
color: 'green' | 'blue';
|
||||
}) => {
|
||||
const bgColor = color === 'green' ? 'bg-green-900/50' : 'bg-blue-900/50';
|
||||
const textColor = color === 'green' ? 'text-green-400' : 'text-blue-400';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4 className={`text-xs font-semibold ${textColor} mb-1`}>{label}:</h4>
|
||||
{cards.size === 0 ? (
|
||||
<p className="text-gray-500 text-xs">{emptyLabel}</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{Array.from(cards.values()).map((item) => (
|
||||
<div
|
||||
key={item.card.id}
|
||||
className={`flex items-center gap-1 ${bgColor} px-1.5 py-0.5 rounded text-xs`}
|
||||
>
|
||||
<span className="truncate max-w-[80px]">{item.card.name}</span>
|
||||
<span className={textColor}>x{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => onRemove(item.card.id)}
|
||||
className="text-red-400 active:text-red-300"
|
||||
>
|
||||
<Minus size={12} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center">
|
||||
<Loader2 className="animate-spin text-blue-500" size={48} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-0 md:p-4">
|
||||
<div className="bg-gray-800 w-full h-full md:rounded-lg md:w-full md:max-w-6xl md:max-h-[90vh] overflow-hidden flex flex-col">
|
||||
|
||||
{/* ============ MOBILE VIEW ============ */}
|
||||
<div className="flex flex-col h-full md:hidden">
|
||||
{/* Mobile Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b border-gray-700">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<ArrowLeftRight size={20} className="text-blue-400 flex-shrink-0" />
|
||||
<h2 className="font-bold truncate">Trade with {receiverUsername}</h2>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 -mr-2 active:bg-gray-700 rounded-lg">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Gift Toggle */}
|
||||
<div className="p-3 border-b border-gray-700">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<div
|
||||
className={`relative w-12 h-6 rounded-full transition-colors ${
|
||||
isGiftMode ? 'bg-purple-600' : 'bg-gray-600'
|
||||
}`}
|
||||
onClick={() => setIsGiftMode(!isGiftMode)}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
|
||||
isGiftMode ? 'translate-x-7' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Gift size={18} className={isGiftMode ? 'text-purple-400' : 'text-gray-400'} />
|
||||
<span className={isGiftMode ? 'text-purple-400' : 'text-gray-400'}>
|
||||
This is a gift (I don't want anything back)
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Step Indicator */}
|
||||
<div className="flex items-center justify-center gap-2 p-2 bg-gray-900/50">
|
||||
{!isGiftMode && (
|
||||
<>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${mobileStep === 'want' ? 'bg-blue-500' : 'bg-gray-600'}`}
|
||||
/>
|
||||
<span className={`text-xs ${mobileStep === 'want' ? 'text-blue-400' : 'text-gray-500'}`}>
|
||||
I Want
|
||||
</span>
|
||||
<ArrowRight size={14} className="text-gray-500" />
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${mobileStep === 'give' ? 'bg-green-500' : 'bg-gray-600'}`}
|
||||
/>
|
||||
<span className={`text-xs ${mobileStep === 'give' ? 'text-green-400' : 'text-gray-500'}`}>
|
||||
I Give
|
||||
</span>
|
||||
<ArrowRight size={14} className="text-gray-500" />
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${mobileStep === 'review' ? 'bg-purple-500' : 'bg-gray-600'}`}
|
||||
/>
|
||||
<span className={`text-xs ${mobileStep === 'review' ? 'text-purple-400' : 'text-gray-500'}`}>
|
||||
Review
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Mobile Content */}
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
{/* Step: Want (their collection) */}
|
||||
{mobileStep === 'want' && !isGiftMode && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-blue-400 mb-3">
|
||||
Select cards from {receiverUsername}'s collection
|
||||
</h3>
|
||||
<CollectionGrid
|
||||
items={receiverCollection}
|
||||
selectedCards={wantedCards}
|
||||
onAdd={addToWanted}
|
||||
onRemove={removeFromWanted}
|
||||
emptyMessage="Their collection is empty"
|
||||
selectionColor="blue"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step: Give (my collection) */}
|
||||
{mobileStep === 'give' && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-green-400 mb-3">
|
||||
Select cards to {isGiftMode ? 'gift' : 'offer'}
|
||||
</h3>
|
||||
{myCollection.length === 0 ? (
|
||||
<p className="text-gray-400 text-center py-8">Your collection is empty</p>
|
||||
) : (
|
||||
<CollectionGrid
|
||||
items={myCollection}
|
||||
selectedCards={myOfferedCards}
|
||||
onAdd={addToOffer}
|
||||
onRemove={removeFromOffer}
|
||||
emptyMessage="Your collection is empty"
|
||||
selectionColor="green"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step: Review */}
|
||||
{mobileStep === 'review' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-semibold text-purple-400">Review Trade</h3>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="bg-gray-900/50 rounded-lg p-3 space-y-3">
|
||||
<SelectedCardsSummary
|
||||
cards={myOfferedCards}
|
||||
onRemove={removeFromOffer}
|
||||
label="I Give"
|
||||
emptyLabel="Nothing (requesting cards)"
|
||||
color="green"
|
||||
/>
|
||||
{!isGiftMode && (
|
||||
<SelectedCardsSummary
|
||||
cards={wantedCards}
|
||||
onRemove={removeFromWanted}
|
||||
label="I Want"
|
||||
emptyLabel="Nothing (sending gift)"
|
||||
color="blue"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Message (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
placeholder="Add a message..."
|
||||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Footer */}
|
||||
<div className="border-t border-gray-700 p-3 flex gap-2">
|
||||
{/* Back button */}
|
||||
{(mobileStep !== 'want' && !isGiftMode) || (mobileStep !== 'give' && isGiftMode) ? (
|
||||
<button
|
||||
onClick={goToPrevStep}
|
||||
disabled={mobileStep === 'give' && isGiftMode}
|
||||
className="flex items-center justify-center gap-1 px-4 py-2.5 bg-gray-700 active:bg-gray-600 disabled:opacity-50 rounded-lg flex-1"
|
||||
>
|
||||
<ArrowLeft size={18} />
|
||||
Back
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-700 rounded-lg transition"
|
||||
className="flex items-center justify-center gap-1 px-4 py-2.5 bg-gray-700 active:bg-gray-600 rounded-lg flex-1"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Next/Submit button */}
|
||||
{mobileStep === 'review' ? (
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting || !canSubmit}
|
||||
className="flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 active:bg-blue-700 disabled:bg-gray-600 rounded-lg flex-1"
|
||||
>
|
||||
{submitting ? (
|
||||
<Loader2 className="animate-spin" size={18} />
|
||||
) : isGift ? (
|
||||
<>
|
||||
<Gift size={18} />
|
||||
Send Gift
|
||||
</>
|
||||
) : isRequest ? (
|
||||
<>
|
||||
<Send size={18} />
|
||||
Request
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send size={18} />
|
||||
Send Trade
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={goToNextStep}
|
||||
className="flex items-center justify-center gap-1 px-4 py-2.5 bg-blue-600 active:bg-blue-700 rounded-lg flex-1"
|
||||
>
|
||||
Next
|
||||
<ArrowRight size={18} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ============ DESKTOP VIEW ============ */}
|
||||
<div className="hidden md:flex md:flex-col h-full">
|
||||
{/* Desktop Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<ArrowLeftRight size={24} className="text-blue-400" />
|
||||
<h2 className="text-xl font-bold">Trade with {receiverUsername}</h2>
|
||||
<label className="flex items-center gap-2 ml-4 cursor-pointer">
|
||||
<div
|
||||
className={`relative w-10 h-5 rounded-full transition-colors ${
|
||||
isGiftMode ? 'bg-purple-600' : 'bg-gray-600'
|
||||
}`}
|
||||
onClick={() => setIsGiftMode(!isGiftMode)}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform ${
|
||||
isGiftMode ? 'translate-x-5' : 'translate-x-0.5'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<Gift size={16} className={isGiftMode ? 'text-purple-400' : 'text-gray-400'} />
|
||||
<span className={`text-sm ${isGiftMode ? 'text-purple-400' : 'text-gray-400'}`}>
|
||||
Gift mode
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-700 rounded-lg transition">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-hidden flex flex-col md:flex-row">
|
||||
{/* Desktop Content */}
|
||||
<div className="flex-1 overflow-hidden flex">
|
||||
{/* My Collection (Left) */}
|
||||
<div className="flex-1 p-4 border-b md:border-b-0 md:border-r border-gray-700 overflow-y-auto">
|
||||
<div className="flex-1 p-4 border-r border-gray-700 overflow-y-auto">
|
||||
<h3 className="text-lg font-semibold mb-3 text-green-400">
|
||||
My Collection (I give)
|
||||
</h3>
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
) : myCollection.length === 0 ? (
|
||||
<p className="text-gray-400 text-center py-4">Your collection is empty</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
|
||||
{myCollection.map(({ card, quantity }) => {
|
||||
const offered = myOfferedCards.get(card.id);
|
||||
const remainingQty = quantity - (offered?.quantity || 0);
|
||||
return (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`relative cursor-pointer rounded-lg overflow-hidden transition ${
|
||||
offered ? 'ring-2 ring-green-500' : 'hover:ring-2 hover:ring-gray-500'
|
||||
}`}
|
||||
onClick={() => remainingQty > 0 && addToOffer(card, quantity)}
|
||||
>
|
||||
<img
|
||||
src={card.image_uris?.small}
|
||||
alt={card.name}
|
||||
className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
|
||||
<CollectionGrid
|
||||
items={myCollection}
|
||||
selectedCards={myOfferedCards}
|
||||
onAdd={addToOffer}
|
||||
onRemove={removeFromOffer}
|
||||
emptyMessage="Your collection is empty"
|
||||
selectionColor="green"
|
||||
/>
|
||||
<div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded">
|
||||
{remainingQty}/{quantity}
|
||||
</div>
|
||||
{offered && (
|
||||
<div className="absolute bottom-1 left-1 bg-green-600 text-white text-xs px-1.5 py-0.5 rounded">
|
||||
+{offered.quantity}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Their Collection (Right) */}
|
||||
{!isGiftMode && (
|
||||
<div className="flex-1 p-4 overflow-y-auto">
|
||||
<h3 className="text-lg font-semibold mb-3 text-blue-400">
|
||||
{receiverUsername}'s Collection (I want)
|
||||
</h3>
|
||||
{receiverCollection.length === 0 ? (
|
||||
<p className="text-gray-400 text-center py-4">Their collection is empty</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
|
||||
{receiverCollection.map(({ card, quantity }) => {
|
||||
const wanted = wantedCards.get(card.id);
|
||||
const remainingQty = quantity - (wanted?.quantity || 0);
|
||||
return (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`relative cursor-pointer rounded-lg overflow-hidden transition ${
|
||||
wanted ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-gray-500'
|
||||
}`}
|
||||
onClick={() => remainingQty > 0 && addToWanted(card, quantity)}
|
||||
>
|
||||
<img
|
||||
src={card.image_uris?.small}
|
||||
alt={card.name}
|
||||
className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
|
||||
<CollectionGrid
|
||||
items={receiverCollection}
|
||||
selectedCards={wantedCards}
|
||||
onAdd={addToWanted}
|
||||
onRemove={removeFromWanted}
|
||||
emptyMessage="Their collection is empty"
|
||||
selectionColor="blue"
|
||||
/>
|
||||
<div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded">
|
||||
{remainingQty}/{quantity}
|
||||
</div>
|
||||
{wanted && (
|
||||
<div className="absolute bottom-1 left-1 bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded">
|
||||
+{wanted.quantity}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trade Summary */}
|
||||
{/* Desktop Footer */}
|
||||
<div className="border-t border-gray-700 p-4">
|
||||
<div className="flex flex-col md:flex-row gap-4 mb-4">
|
||||
{/* I Give */}
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-semibold text-green-400 mb-2">I Give:</h4>
|
||||
{myOfferedCards.size === 0 ? (
|
||||
<p className="text-gray-500 text-sm">Nothing selected (gift request)</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.from(myOfferedCards.values()).map((item) => (
|
||||
<div
|
||||
key={item.card.id}
|
||||
className="flex items-center gap-1 bg-green-900/50 px-2 py-1 rounded text-sm"
|
||||
>
|
||||
<span>{item.card.name}</span>
|
||||
<span className="text-green-400">x{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => removeFromOffer(item.card.id)}
|
||||
className="ml-1 text-red-400 hover:text-red-300"
|
||||
>
|
||||
<Minus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-6 mb-4">
|
||||
<SelectedCardsSummary
|
||||
cards={myOfferedCards}
|
||||
onRemove={removeFromOffer}
|
||||
label="I Give"
|
||||
emptyLabel="Nothing selected (gift request)"
|
||||
color="green"
|
||||
/>
|
||||
{!isGiftMode && (
|
||||
<SelectedCardsSummary
|
||||
cards={wantedCards}
|
||||
onRemove={removeFromWanted}
|
||||
label="I Want"
|
||||
emptyLabel="Nothing selected (gift)"
|
||||
color="blue"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* I Want */}
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-semibold text-blue-400 mb-2">I Want:</h4>
|
||||
{wantedCards.size === 0 ? (
|
||||
<p className="text-gray-500 text-sm">Nothing selected (gift)</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.from(wantedCards.values()).map((item) => (
|
||||
<div
|
||||
key={item.card.id}
|
||||
className="flex items-center gap-1 bg-blue-900/50 px-2 py-1 rounded text-sm"
|
||||
>
|
||||
<span>{item.card.name}</span>
|
||||
<span className="text-blue-400">x{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => removeFromWanted(item.card.id)}
|
||||
className="ml-1 text-red-400 hover:text-red-300"
|
||||
>
|
||||
<Minus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
placeholder="Add a message (optional)"
|
||||
className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition"
|
||||
@@ -352,11 +633,11 @@ export default function TradeCreator({
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting || (myOfferedCards.size === 0 && wantedCards.size === 0)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg transition"
|
||||
disabled={submitting || !canSubmit}
|
||||
className="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg transition"
|
||||
>
|
||||
{submitting ? (
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div>
|
||||
<Loader2 className="animate-spin" size={20} />
|
||||
) : isGift ? (
|
||||
<>
|
||||
<Gift size={20} />
|
||||
@@ -378,5 +659,6 @@ export default function TradeCreator({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user