97 lines
3.4 KiB
JavaScript
97 lines
3.4 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
|
|
/**
|
|
* Modal for choosing a category in bulk.
|
|
*
|
|
* Props:
|
|
* - open: boolean
|
|
* - categories: array of content types with nested categories
|
|
* - onClose: () => void
|
|
* - onConfirm: (categoryId: number) => void
|
|
*/
|
|
export default function BulkCategoryModal({ open, categories = [], onClose, onConfirm }) {
|
|
const [selectedId, setSelectedId] = useState('')
|
|
|
|
useEffect(() => {
|
|
if (open) setSelectedId('')
|
|
}, [open])
|
|
|
|
const handleConfirm = () => {
|
|
if (!selectedId) return
|
|
onConfirm(Number(selectedId))
|
|
}
|
|
|
|
const handleKeyDown = (e) => {
|
|
if (e.key === 'Escape') onClose()
|
|
if (e.key === 'Enter' && selectedId) handleConfirm()
|
|
}
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4" onKeyDown={handleKeyDown}>
|
|
{/* Backdrop */}
|
|
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
|
|
|
|
{/* Modal */}
|
|
<div className="relative w-full max-w-md bg-nova-900 border border-white/10 rounded-2xl shadow-2xl p-6 space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
|
|
<i className="fa-solid fa-folder text-accent" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white">Change category</h3>
|
|
<p className="text-sm text-slate-400">Choose a category to assign to the selected artworks.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category select */}
|
|
<div>
|
|
<label className="text-xs font-medium text-slate-400 mb-1.5 block">Category</label>
|
|
<select
|
|
value={selectedId}
|
|
onChange={(e) => setSelectedId(e.target.value)}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50"
|
|
>
|
|
<option value="" className="bg-nova-900">Select a category…</option>
|
|
{categories.map((ct) => (
|
|
<optgroup key={ct.id} label={ct.name}>
|
|
{ct.categories?.map((cat) => (
|
|
<React.Fragment key={cat.id}>
|
|
<option value={cat.id} className="bg-nova-900">{cat.name}</option>
|
|
{cat.children?.map((ch) => (
|
|
<option key={ch.id} value={ch.id} className="bg-nova-900"> {ch.name}</option>
|
|
))}
|
|
</React.Fragment>
|
|
))}
|
|
</optgroup>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center justify-end gap-2 pt-2">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleConfirm}
|
|
disabled={!selectedId}
|
|
className={`px-5 py-2 rounded-xl text-sm font-semibold transition-all ${
|
|
selectedId
|
|
? 'bg-accent hover:bg-accent/90 text-white'
|
|
: 'bg-white/5 text-slate-500 cursor-not-allowed'
|
|
}`}
|
|
>
|
|
Apply category
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|