68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
/* ════════════════════════════ BatchBar ════════════════════════════
|
||
|
|
* Floating "N selected" action bar voor batch operaties.
|
||
|
|
* Verschijnt onderaan zodra >= 1 item geselecteerd is.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { Trash2, Download, X } from 'lucide-react';
|
||
|
|
|
||
|
|
export interface BatchAction {
|
||
|
|
key: string;
|
||
|
|
label: string;
|
||
|
|
icon?: React.ReactNode;
|
||
|
|
variant?: 'danger' | 'default';
|
||
|
|
onClick: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface BatchBarProps {
|
||
|
|
count: number;
|
||
|
|
actions: BatchAction[];
|
||
|
|
onClear: () => void;
|
||
|
|
label?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function BatchBar({ count, actions, onClear, label = 'geselecteerd' }: BatchBarProps) {
|
||
|
|
if (count === 0) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-slide-up">
|
||
|
|
<div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-800 border border-surface-700 shadow-xl shadow-black/30">
|
||
|
|
{/* Count badge */}
|
||
|
|
<span className="text-sm text-surface-200 font-medium whitespace-nowrap">
|
||
|
|
<span className="text-brand-400">{count}</span> {label}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<div className="w-px h-5 bg-surface-700" />
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
{actions.map((action) => (
|
||
|
|
<button
|
||
|
|
key={action.key}
|
||
|
|
onClick={action.onClick}
|
||
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||
|
|
action.variant === 'danger'
|
||
|
|
? 'bg-accent-rose/10 text-accent-rose hover:bg-accent-rose/20'
|
||
|
|
: 'bg-brand-500/10 text-brand-400 hover:bg-brand-500/20'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{action.icon}
|
||
|
|
{action.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Close */}
|
||
|
|
<button
|
||
|
|
onClick={onClear}
|
||
|
|
className="p-1.5 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-700 transition-colors"
|
||
|
|
aria-label="Deselecteer alles"
|
||
|
|
>
|
||
|
|
<X className="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|