81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
|
import { Modal, Input, Button } from './ui';
|
||
|
|
import { DECK_INPUT_FIELD_CLASS } from '../lib/deck-format-utils.js';
|
||
|
|
|
||
|
|
export default function DecksEditModal({
|
||
|
|
editingDeck,
|
||
|
|
setEditingDeck,
|
||
|
|
onClose,
|
||
|
|
onEdit,
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<Modal open={!!editingDeck} onClose={onClose} title="Edit Deck" size="md">
|
||
|
|
{editingDeck && (
|
||
|
|
<form onSubmit={onEdit} className="space-y-4">
|
||
|
|
<Input
|
||
|
|
label="Deck Name *"
|
||
|
|
required
|
||
|
|
value={editingDeck.name}
|
||
|
|
onChange={(e) => setEditingDeck({ ...editingDeck, name: e.target.value })}
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<label
|
||
|
|
className="block text-sm font-medium mb-2"
|
||
|
|
style={{ color: 'var(--text-primary)' }}
|
||
|
|
htmlFor="edit-deck-format"
|
||
|
|
>
|
||
|
|
Format
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
id="edit-deck-format"
|
||
|
|
value={editingDeck.format}
|
||
|
|
onChange={(e) => setEditingDeck({ ...editingDeck, format: e.target.value })}
|
||
|
|
className={DECK_INPUT_FIELD_CLASS}
|
||
|
|
>
|
||
|
|
<option value="Commander">Commander</option>
|
||
|
|
<option value="Standard">Standard</option>
|
||
|
|
<option value="Modern">Modern</option>
|
||
|
|
<option value="Legacy">Legacy</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label
|
||
|
|
className="block text-sm font-medium mb-2"
|
||
|
|
style={{ color: 'var(--text-primary)' }}
|
||
|
|
htmlFor="edit-deck-description"
|
||
|
|
>
|
||
|
|
Description
|
||
|
|
</label>
|
||
|
|
<textarea
|
||
|
|
id="edit-deck-description"
|
||
|
|
value={editingDeck.description || ''}
|
||
|
|
onChange={(e) => setEditingDeck({ ...editingDeck, description: e.target.value })}
|
||
|
|
className={DECK_INPUT_FIELD_CLASS}
|
||
|
|
rows="3"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<label className="flex items-center">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={editingDeck.is_public}
|
||
|
|
onChange={(e) => setEditingDeck({ ...editingDeck, is_public: e.target.checked })}
|
||
|
|
className="mr-2"
|
||
|
|
style={{ accentColor: 'var(--accent-ember)' }}
|
||
|
|
/>
|
||
|
|
<span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
Make deck public
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
<div className="flex space-x-3 pt-2">
|
||
|
|
<Button type="button" variant="secondary" onClick={onClose} className="flex-1">
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
<Button type="submit" variant="primary" className="flex-1">
|
||
|
|
Save Changes
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
)}
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|