File size: 1,488 Bytes
91a76f7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 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>
);
}
|