video-flow-b/components/script-overview/floating-toolbar.tsx

import { motion } from 'framer-motion';
import { Save, Download, Trash2 } from 'lucide-react';

interface FloatingToolbarProps {
  onSave: () => void;
  onExport: () => void;
  onClear: () => void;
}

export function FloatingToolbar({
  onSave,
  onExport,
  onClear
}: FloatingToolbarProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="fixed bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-2
        bg-white/5 backdrop-blur-sm rounded-full p-2 shadow-lg"
    >
      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={onSave}
        className="p-2 hover:bg-white/10 rounded-full transition-colors
          flex items-center gap-2"
      >
        <Save className="w-5 h-5" />
        <span>保存</span>
      </motion.button>

      <div className="w-px h-6 bg-white/10" />

      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={onExport}
        className="p-2 hover:bg-white/10 rounded-full transition-colors
          flex items-center gap-2"
      >
        <Download className="w-5 h-5" />
        <span>导出</span>
      </motion.button>

      <div className="w-px h-6 bg-white/10" />

      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={onClear}
        className="p-2 hover:bg-red-500/20 text-red-500 rounded-full
          transition-colors flex items-center gap-2"
      >
        <Trash2 className="w-5 h-5" />
        <span>清空</span>
      </motion.button>
    </motion.div>
  );
}