76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
import React, { useState } from 'react'
|
|
import NovaSelect from '../ui/NovaSelect'
|
|
|
|
const actions = [
|
|
{ value: 'publish', label: 'Publish', icon: 'fa-eye', danger: false },
|
|
{ value: 'unpublish', label: 'Unpublish (draft)', icon: 'fa-eye-slash', danger: false },
|
|
{ value: 'archive', label: 'Archive', icon: 'fa-box-archive', danger: false },
|
|
{ value: 'unarchive', label: 'Unarchive', icon: 'fa-rotate-left', danger: false },
|
|
{ value: 'delete', label: 'Delete', icon: 'fa-trash', danger: true },
|
|
{ value: 'change_category', label: 'Change category', icon: 'fa-folder', danger: false },
|
|
{ value: 'add_tags', label: 'Add tags', icon: 'fa-tag', danger: false },
|
|
{ value: 'remove_tags', label: 'Remove tags', icon: 'fa-tags', danger: false },
|
|
]
|
|
|
|
export default function BulkActionsBar({ count, onExecute, onClearSelection }) {
|
|
const [action, setAction] = useState('')
|
|
|
|
if (count === 0) return null
|
|
|
|
const handleExecute = () => {
|
|
if (!action) return
|
|
onExecute(action)
|
|
setAction('')
|
|
}
|
|
|
|
const selectedAction = actions.find((a) => a.value === action)
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 bg-nova-900/95 backdrop-blur-xl border-t border-white/10 px-4 py-3 shadow-xl shadow-black/20">
|
|
<div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-accent/20 text-accent text-sm font-bold">
|
|
{count}
|
|
</span>
|
|
<span className="text-sm text-slate-300">
|
|
{count === 1 ? 'artwork' : 'artworks'} selected
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-[180px]">
|
|
<NovaSelect
|
|
options={actions.map((a) => ({ value: a.value, label: a.label }))}
|
|
value={action || null}
|
|
onChange={(val) => setAction(val ?? '')}
|
|
placeholder="Choose action…"
|
|
searchable={false}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleExecute}
|
|
disabled={!action}
|
|
className={`px-5 py-2 rounded-xl text-sm font-semibold transition-all ${
|
|
action
|
|
? selectedAction?.danger
|
|
? 'bg-red-600 hover:bg-red-700 text-white'
|
|
: 'bg-accent hover:bg-accent/90 text-white'
|
|
: 'bg-white/5 text-slate-500 cursor-not-allowed'
|
|
}`}
|
|
>
|
|
Apply
|
|
</button>
|
|
|
|
<button
|
|
onClick={onClearSelection}
|
|
className="px-4 py-2 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
|
|
>
|
|
Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|