Upload components/ExportControls.js with huggingface_hub

components/ExportControls.js

@@ -0,0 +1,44 @@
+import { FileJson, FileText, Download } from 'lucide-react';
+
+export default function ExportControls({ count, onExport, exporting, progress }) {
+  if (count === 0) return null;
+
+  return (
+    <div className="bg-slate-800 border border-slate-700 rounded-xl p-4 mb-6 flex items-center justify-between shadow-lg">
+      <div className="flex items-center gap-4">
+        <div className="bg-blue-500/20 text-blue-400 px-3 py-1 rounded font-mono text-sm">
+          {count} Selected
+        </div>
+        <span className="text-slate-400 text-sm">Ready for batch export</span>
+      </div>
+
+      <div className="flex gap-3">
+        <button 
+          onClick={() => onExport('json')}
+          disabled={exporting}
+          className="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <FileJson size={18} />
+          JSON
+        </button>
+        <button 
+          onClick={() => onExport('csv')}
+          disabled={exporting}
+          className="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <FileText size={18} />
+          CSV
+        </button>
+      </div>
+
+      {exporting && (
+        <div className="absolute bottom-0 left-0 w-full h-2 bg-slate-900 rounded-b overflow-hidden">
+          <div 
+            className="h-full bg-blue-500 transition-all duration-300 ease-out"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}