Upload src/components/CsvExportButton.tsx with huggingface_hub

src/components/CsvExportButton.tsx

@@ -0,0 +1,47 @@
+import { Download } from "lucide-react";
+
+interface CsvExportButtonProps {
+  data: any[];
+  filename?: string;
+  className?: string;
+}
+
+export default function CsvExportButton({
+  data,
+  filename = "smartlead-export.csv",
+  className = "px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5 border border-zinc-700",
+}: CsvExportButtonProps) {
+  const exportCsv = () => {
+    if (!data || data.length === 0) return;
+
+    const headers = Object.keys(data[0]);
+    const rows = data.map((item) =>
+      headers
+        .map((header) => {
+          const val = item[header];
+          if (typeof val === "object") {
+            return `"${JSON.stringify(val).replace(/"/g, '""')}"`;
+          }
+          return `"${String(val ?? "").replace(/"/g, '""')}"`;
+        })
+        .join(",")
+    );
+
+    const csvContent = [headers.join(","), ...rows].join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.setAttribute("href", url);
+    link.setAttribute("download", filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <button type="button" onClick={exportCsv} className={className}>
+      <Download className="w-3.5 h-3.5" />
+      Export CSV
+    </button>
+  );
+}