82 lines
2.6 KiB
JavaScript
82 lines
2.6 KiB
JavaScript
|
import { Modal, Input, Button } from './ui';
|
||
|
|
import { DECK_INPUT_FIELD_CLASS } from '../lib/deck-format-utils.js';
|
||
|
|
|
||
|
|
export default function DecksCreateModal({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
newDeck,
|
||
|
|
setNewDeck,
|
||
|
|
onCreate,
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<Modal open={isOpen} onClose={onClose} title="Create New Deck" size="md">
|
||
|
|
<form onSubmit={onCreate} className="space-y-4">
|
||
|
|
<Input
|
||
|
|
label="Deck Name *"
|
||
|
|
required
|
||
|
|
value={newDeck.name}
|
||
|
|
onChange={(e) => setNewDeck({ ...newDeck, name: e.target.value })}
|
||
|
|
placeholder="Enter deck name"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<label
|
||
|
|
className="block text-sm font-medium mb-2"
|
||
|
|
style={{ color: 'var(--text-primary)' }}
|
||
|
|
htmlFor="create-deck-format"
|
||
|
|
>
|
||
|
|
Format
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
id="create-deck-format"
|
||
|
|
value={newDeck.format}
|
||
|
|
onChange={(e) => setNewDeck({ ...newDeck, 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="create-deck-description"
|
||
|
|
>
|
||
|
|
Description
|
||
|
|
</label>
|
||
|
|
<textarea
|
||
|
|
id="create-deck-description"
|
||
|
|
value={newDeck.description}
|
||
|
|
onChange={(e) => setNewDeck({ ...newDeck, description: e.target.value })}
|
||
|
|
className={DECK_INPUT_FIELD_CLASS}
|
||
|
|
rows="3"
|
||
|
|
placeholder="Describe your deck strategy..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<label className="flex items-center">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={newDeck.is_public}
|
||
|
|
onChange={(e) => setNewDeck({ ...newDeck, 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">
|
||
|
|
Create Deck
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|