Build a JSON to CSV Converter (Client-Side Only)

[
  { "id": 1, "name": "John", "role": "Admin" },
  { "id": 2, "name": "Sarah", "role": "User" }
]

const data = JSON.parse(jsonString);
const headers = Object.keys(data[0]); // ["id", "name", "role"]
const csvHeaderRow = headers.join(","); // "id,name,role"

const escapeCSV = (str) => {
    if (str.includes(",") || str.includes("\n") || str.includes('"')) {
        return `"${str.replace(/"/g, '""')}"`; // Escape quotes with double quotes
    }
    return str;
}

'use client';
import { useState } from 'react';
import { Download, FileJson } from 'lucide-react';

export default function JsonToCsv() {
  const [json, setJson] = useState('');
  
  const downloadCSV = () => {
    try {
      const data = JSON.parse(json);
      if (!Array.isArray(data) || data.length === 0) {
        alert("Please enter a non-empty JSON Array");
        return;
      }
      
      // 1. Get Headers
      const headers = Object.keys(data[0]);
      
      // 2. Build Rows
      const rows = data.map(obj => 
        headers.map(header => {
            const val = String(obj[header] ?? '');
            // Safety: Escape special characters
            return val.includes(',') || val.includes('"') || val.includes('\n')
                ? `"${val.replace(/"/g, '""')}"`
                : val;
        }).join(",")
      );
      
      // 3. Combine
      const csvContent = [headers.join(","), ...rows].join("\n");
      
      // 4. Trigger Download
      const blob = new Blob([csvContent], { type: 'text/csv' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'export.csv';
      a.click();
      URL.revokeObjectURL(url);
      
    } catch (e) {
      alert("Invalid JSON! Check your syntax.");
    }
  };

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white border rounded-xl shadow-sm">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold flex items-center gap-2">
            <FileJson className="text-orange-500"/> JSON to CSV
        </h2>
      </div>
      
      <label className="block text-sm font-medium text-gray-700 mb-2">Paste JSON Array</label>
      <textarea 
        className="w-full h-64 p-4 font-mono text-xs border rounded-lg focus:ring-2 focus:ring-orange-500 outline-none"
        placeholder='[ {"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"} ]'
        onChange={e => setJson(e.target.value)}
        value={json}
      />
      
      <button 
        onClick={downloadCSV}
        disabled={!json}
        className="mt-4 w-full flex justify-center items-center gap-2 py-3 bg-slate-900 text-white font-medium rounded-lg hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed transition"
      >
        <Download size={18} /> Convert & Download CSV
      </button>
    </div>
  );
}