41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import { Send } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
|
|
interface BatchActionBarProps {
|
|
selectedCount: number;
|
|
onCancel: () => void;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export default function BatchActionBar({ selectedCount, onCancel, onConfirm }: BatchActionBarProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ y: 80, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: 80, opacity: 0 }}
|
|
className="fixed bottom-4 left-3 right-3 md:left-auto md:right-6 md:bottom-6 md:w-[360px] z-40 bg-slate-900 text-white rounded-2xl shadow-2xl px-4 py-3 flex items-center justify-between gap-3"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-medium">已选</span>
|
|
<span className="text-lg font-black">{selectedCount}</span>
|
|
<span className="text-xs text-slate-400">条</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={onCancel}
|
|
className="text-xs font-medium text-slate-300 hover:text-white px-2 py-1.5 cursor-pointer transition-colors"
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={selectedCount === 0}
|
|
className="flex items-center gap-1.5 text-xs font-bold bg-blue-600 hover:bg-blue-500 disabled:bg-slate-700 disabled:text-slate-400 text-white px-3 py-1.5 rounded-lg cursor-pointer disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<Send size={12} /> 批量干预
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|