| 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> | |
| ); | |
| } | |