refactor(card-editor): extract preview and form components (Brief 2)
Move the sticky preview column and edit form into CardEditorPreview and CardEditorForm; page composer drops to ~275 lines. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Randall Stillwell
parent
5a3f799926
commit
de98f58f54
3 changed files with 463 additions and 434 deletions
390
components/CardEditorForm.js
Normal file
390
components/CardEditorForm.js
Normal file
|
|
@ -0,0 +1,390 @@
|
||||||
|
/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
|
||||||
|
|
||||||
|
const RARITY_OPTIONS = [
|
||||||
|
'common', 'uncommon', 'rare', 'mythic', 'legendary',
|
||||||
|
'holographic', 'enchanted', 'super rare', 'ultra rare',
|
||||||
|
];
|
||||||
|
|
||||||
|
const GAME_OPTIONS = ['MTG', 'Pokemon', 'Lorcana'];
|
||||||
|
|
||||||
|
const COLOR_OPTIONS = ['White', 'Blue', 'Black', 'Red', 'Green', 'Colorless'];
|
||||||
|
|
||||||
|
export default function CardEditorForm({
|
||||||
|
formData,
|
||||||
|
onInputChange,
|
||||||
|
onColorChange,
|
||||||
|
onSave,
|
||||||
|
saving,
|
||||||
|
message,
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Edit Card Details
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
onClick={onSave}
|
||||||
|
disabled={saving}
|
||||||
|
className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
|
||||||
|
saving
|
||||||
|
? 'opacity-50 cursor-not-allowed'
|
||||||
|
: 'gradient-bg-purple text-white hover:shadow-lg'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{saving ? 'Saving...' : 'Save Changes'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{message && (
|
||||||
|
<div className={`p-4 rounded-lg mb-6 ${
|
||||||
|
message.includes('Error')
|
||||||
|
? 'bg-red-100 text-red-700 border border-red-200'
|
||||||
|
: 'bg-green-100 text-green-700 border border-green-200'
|
||||||
|
}`}>
|
||||||
|
{message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Basic Information */}
|
||||||
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||||
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Basic Information
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Card Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => onInputChange('name', e.target.value)}
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Game *
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={formData.game}
|
||||||
|
onChange={(e) => onInputChange('game', e.target.value)}
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="">Select Game</option>
|
||||||
|
{GAME_OPTIONS.map(game => (
|
||||||
|
<option key={game} value={game}>{game}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Set Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.set_name}
|
||||||
|
onChange={(e) => onInputChange('set_name', e.target.value)}
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Set Code
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.set_code}
|
||||||
|
onChange={(e) => onInputChange('set_code', e.target.value)}
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Card Number
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.card_number}
|
||||||
|
onChange={(e) => onInputChange('card_number', e.target.value)}
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Rarity
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={formData.rarity}
|
||||||
|
onChange={(e) => onInputChange('rarity', e.target.value)}
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="">Select Rarity</option>
|
||||||
|
{RARITY_OPTIONS.map(rarity => (
|
||||||
|
<option key={rarity} value={rarity}>{rarity}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Game Mechanics */}
|
||||||
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||||
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Game Mechanics
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Card Type
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.card_type}
|
||||||
|
onChange={(e) => onInputChange('card_type', e.target.value)}
|
||||||
|
placeholder="e.g., Creature, Instant, Pokemon, Character"
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Mana Cost
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.mana_cost}
|
||||||
|
onChange={(e) => onInputChange('mana_cost', e.target.value)}
|
||||||
|
placeholder="e.g., {2}{U}{U}, 3, etc."
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
CMC (Converted Mana Cost)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={formData.cmc}
|
||||||
|
onChange={(e) => onInputChange('cmc', e.target.value)}
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Power
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.power}
|
||||||
|
onChange={(e) => onInputChange('power', e.target.value)}
|
||||||
|
placeholder="e.g., 2, *, X"
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Toughness
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.toughness}
|
||||||
|
onChange={(e) => onInputChange('toughness', e.target.value)}
|
||||||
|
placeholder="e.g., 2, *, X"
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Colors */}
|
||||||
|
<div className="mt-4">
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Colors
|
||||||
|
</label>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{COLOR_OPTIONS.map(color => (
|
||||||
|
<label key={color} className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.colors.includes(color)}
|
||||||
|
onChange={(e) => onColorChange(color, e.target.checked)}
|
||||||
|
className="rounded"
|
||||||
|
/>
|
||||||
|
<span style={{ color: 'var(--text-primary)' }}>{color}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card Text */}
|
||||||
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||||
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Card Text
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Oracle Text / Abilities
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.oracle_text}
|
||||||
|
onChange={(e) => onInputChange('oracle_text', e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
placeholder="Enter the card's rules text, abilities, or flavor text..."
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Images */}
|
||||||
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||||
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Card Images
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Primary Image URL
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
value={formData.image_url}
|
||||||
|
onChange={(e) => onInputChange('image_url', e.target.value)}
|
||||||
|
placeholder="https://example.com/card-image.jpg"
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Stock Image URL
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
value={formData.stock_image_url}
|
||||||
|
onChange={(e) => onInputChange('stock_image_url', e.target.value)}
|
||||||
|
placeholder="https://example.com/stock-image.jpg"
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pricing */}
|
||||||
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||||
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Pricing Information
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Current Price ($)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.current_price}
|
||||||
|
onChange={(e) => onInputChange('current_price', e.target.value)}
|
||||||
|
placeholder="0.00"
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Market Price ($)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.market_price}
|
||||||
|
onChange={(e) => onInputChange('market_price', e.target.value)}
|
||||||
|
placeholder="0.00"
|
||||||
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg-primary)',
|
||||||
|
borderColor: 'var(--border)',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
62
components/CardEditorPreview.js
Normal file
62
components/CardEditorPreview.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
|
||||||
|
|
||||||
|
export default function CardEditorPreview({ formData }) {
|
||||||
|
return (
|
||||||
|
<div className="sticky top-8">
|
||||||
|
<h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
Card Preview
|
||||||
|
</h2>
|
||||||
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||||
|
<div className="w-full max-w-xs mx-auto">
|
||||||
|
<div
|
||||||
|
className="w-full rounded-lg overflow-hidden shadow-lg"
|
||||||
|
style={{ aspectRatio: '5/7' }}
|
||||||
|
>
|
||||||
|
{formData.image_url ? (
|
||||||
|
<img
|
||||||
|
src={formData.image_url}
|
||||||
|
alt={formData.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
e.target.style.display = 'none';
|
||||||
|
e.target.nextSibling.style.display = 'flex';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<div
|
||||||
|
className={`w-full h-full flex items-center justify-center ${formData.image_url ? 'hidden' : 'flex'}`}
|
||||||
|
style={{ backgroundColor: 'var(--bg-primary)' }}
|
||||||
|
>
|
||||||
|
<div className="text-center p-4">
|
||||||
|
<div className="text-4xl mb-2">🃏</div>
|
||||||
|
<div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
{formData.name || 'Card Name'}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||||||
|
{formData.set_name || 'Set Name'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 text-center">
|
||||||
|
<h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||||
|
{formData.name || 'Card Name'}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||||
|
{formData.set_name} • {formData.game}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||||
|
{formData.rarity} • {formData.card_type}
|
||||||
|
</p>
|
||||||
|
{formData.current_price && (
|
||||||
|
<p className="text-lg font-bold mt-2 gradient-text-gold">
|
||||||
|
${parseFloat(formData.current_price).toFixed(2)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,8 @@ import { useRouter } from 'next/router';
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
import Layout from '../../components/Layout';
|
import Layout from '../../components/Layout';
|
||||||
import AdminProtected from '../../components/AdminProtected';
|
import AdminProtected from '../../components/AdminProtected';
|
||||||
|
import CardEditorForm from '../../components/CardEditorForm';
|
||||||
|
import CardEditorPreview from '../../components/CardEditorPreview';
|
||||||
import CardEditorSearchPanel from '../../components/CardEditorSearchPanel';
|
import CardEditorSearchPanel from '../../components/CardEditorSearchPanel';
|
||||||
|
|
||||||
// Make this component client-side only to avoid SSR issues
|
// Make this component client-side only to avoid SSR issues
|
||||||
|
|
@ -166,15 +168,6 @@ const CardEditor = () => {
|
||||||
router.push(`/admin/card-editor?id=${selectedCard.id}`);
|
router.push(`/admin/card-editor?id=${selectedCard.id}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
const rarityOptions = [
|
|
||||||
'common', 'uncommon', 'rare', 'mythic', 'legendary',
|
|
||||||
'holographic', 'enchanted', 'super rare', 'ultra rare'
|
|
||||||
];
|
|
||||||
|
|
||||||
const gameOptions = ['MTG', 'Pokemon', 'Lorcana'];
|
|
||||||
|
|
||||||
const colorOptions = ['White', 'Blue', 'Black', 'Red', 'Green', 'Colorless'];
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<AdminProtected>
|
<AdminProtected>
|
||||||
|
|
@ -245,434 +238,18 @@ const CardEditor = () => {
|
||||||
{/* Card Editor Form */}
|
{/* Card Editor Form */}
|
||||||
{card && (
|
{card && (
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
{/* Card Preview */}
|
|
||||||
<div className="lg:col-span-1">
|
<div className="lg:col-span-1">
|
||||||
<div className="sticky top-8">
|
<CardEditorPreview formData={formData} />
|
||||||
<h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Card Preview
|
|
||||||
</h2>
|
|
||||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
||||||
<div className="w-full max-w-xs mx-auto">
|
|
||||||
<div
|
|
||||||
className="w-full rounded-lg overflow-hidden shadow-lg"
|
|
||||||
style={{ aspectRatio: '5/7' }}
|
|
||||||
>
|
|
||||||
{formData.image_url ? (
|
|
||||||
<img
|
|
||||||
src={formData.image_url}
|
|
||||||
alt={formData.name}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
onError={(e) => {
|
|
||||||
e.target.style.display = 'none';
|
|
||||||
e.target.nextSibling.style.display = 'flex';
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
<div
|
|
||||||
className={`w-full h-full flex items-center justify-center ${formData.image_url ? 'hidden' : 'flex'}`}
|
|
||||||
style={{ backgroundColor: 'var(--bg-primary)' }}
|
|
||||||
>
|
|
||||||
<div className="text-center p-4">
|
|
||||||
<div className="text-4xl mb-2">🃏</div>
|
|
||||||
<div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
{formData.name || 'Card Name'}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
|
||||||
{formData.set_name || 'Set Name'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 text-center">
|
|
||||||
<h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
{formData.name || 'Card Name'}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
||||||
{formData.set_name} • {formData.game}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
||||||
{formData.rarity} • {formData.card_type}
|
|
||||||
</p>
|
|
||||||
{formData.current_price && (
|
|
||||||
<p className="text-lg font-bold mt-2 gradient-text-gold">
|
|
||||||
${parseFloat(formData.current_price).toFixed(2)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Editor Form */}
|
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<div className="flex items-center justify-between mb-6">
|
<CardEditorForm
|
||||||
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
formData={formData}
|
||||||
Edit Card Details
|
onInputChange={handleInputChange}
|
||||||
</h2>
|
onColorChange={handleColorChange}
|
||||||
<button
|
onSave={handleSave}
|
||||||
onClick={handleSave}
|
saving={saving}
|
||||||
disabled={saving}
|
message={message}
|
||||||
className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
|
/>
|
||||||
saving
|
|
||||||
? 'opacity-50 cursor-not-allowed'
|
|
||||||
: 'gradient-bg-purple text-white hover:shadow-lg'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{saving ? 'Saving...' : 'Save Changes'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div className={`p-4 rounded-lg mb-6 ${
|
|
||||||
message.includes('Error')
|
|
||||||
? 'bg-red-100 text-red-700 border border-red-200'
|
|
||||||
: 'bg-green-100 text-green-700 border border-green-200'
|
|
||||||
}`}>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Basic Information */}
|
|
||||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
||||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Basic Information
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Card Name *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Game *
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={formData.game}
|
|
||||||
onChange={(e) => handleInputChange('game', e.target.value)}
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="">Select Game</option>
|
|
||||||
{gameOptions.map(game => (
|
|
||||||
<option key={game} value={game}>{game}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Set Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.set_name}
|
|
||||||
onChange={(e) => handleInputChange('set_name', e.target.value)}
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Set Code
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.set_code}
|
|
||||||
onChange={(e) => handleInputChange('set_code', e.target.value)}
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Card Number
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.card_number}
|
|
||||||
onChange={(e) => handleInputChange('card_number', e.target.value)}
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Rarity
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={formData.rarity}
|
|
||||||
onChange={(e) => handleInputChange('rarity', e.target.value)}
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="">Select Rarity</option>
|
|
||||||
{rarityOptions.map(rarity => (
|
|
||||||
<option key={rarity} value={rarity}>{rarity}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Game Mechanics */}
|
|
||||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
||||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Game Mechanics
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Card Type
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.card_type}
|
|
||||||
onChange={(e) => handleInputChange('card_type', e.target.value)}
|
|
||||||
placeholder="e.g., Creature, Instant, Pokemon, Character"
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Mana Cost
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.mana_cost}
|
|
||||||
onChange={(e) => handleInputChange('mana_cost', e.target.value)}
|
|
||||||
placeholder="e.g., {2}{U}{U}, 3, etc."
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
CMC (Converted Mana Cost)
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={formData.cmc}
|
|
||||||
onChange={(e) => handleInputChange('cmc', e.target.value)}
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Power
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.power}
|
|
||||||
onChange={(e) => handleInputChange('power', e.target.value)}
|
|
||||||
placeholder="e.g., 2, *, X"
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Toughness
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.toughness}
|
|
||||||
onChange={(e) => handleInputChange('toughness', e.target.value)}
|
|
||||||
placeholder="e.g., 2, *, X"
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Colors */}
|
|
||||||
<div className="mt-4">
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Colors
|
|
||||||
</label>
|
|
||||||
<div className="flex flex-wrap gap-3">
|
|
||||||
{colorOptions.map(color => (
|
|
||||||
<label key={color} className="flex items-center gap-2 cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={formData.colors.includes(color)}
|
|
||||||
onChange={(e) => handleColorChange(color, e.target.checked)}
|
|
||||||
className="rounded"
|
|
||||||
/>
|
|
||||||
<span style={{ color: 'var(--text-primary)' }}>{color}</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Card Text */}
|
|
||||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
||||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Card Text
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Oracle Text / Abilities
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
value={formData.oracle_text}
|
|
||||||
onChange={(e) => handleInputChange('oracle_text', e.target.value)}
|
|
||||||
rows={4}
|
|
||||||
placeholder="Enter the card's rules text, abilities, or flavor text..."
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Images */}
|
|
||||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
||||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Card Images
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Primary Image URL
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
value={formData.image_url}
|
|
||||||
onChange={(e) => handleInputChange('image_url', e.target.value)}
|
|
||||||
placeholder="https://example.com/card-image.jpg"
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Stock Image URL
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
value={formData.stock_image_url}
|
|
||||||
onChange={(e) => handleInputChange('stock_image_url', e.target.value)}
|
|
||||||
placeholder="https://example.com/stock-image.jpg"
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pricing */}
|
|
||||||
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
||||||
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Pricing Information
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Current Price ($)
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
value={formData.current_price}
|
|
||||||
onChange={(e) => handleInputChange('current_price', e.target.value)}
|
|
||||||
placeholder="0.00"
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
||||||
Market Price ($)
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
value={formData.market_price}
|
|
||||||
onChange={(e) => handleInputChange('market_price', e.target.value)}
|
|
||||||
placeholder="0.00"
|
|
||||||
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--bg-primary)',
|
|
||||||
borderColor: 'var(--border)',
|
|
||||||
color: 'var(--text-primary)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue