App para análise e correção de CSV

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [file, setFile] = useState(null);
  const [errorRows, setErrorRows] = useState([]);
  const [correctedRows, setCorrectedRows] = useState([]);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setFile(file);
  };

  const processFile = () => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const text = e.target.result;
      const rows = text.split('\n');
      const header = rows[0].split(',');
      const data = rows.slice(1).map(row => row.split(','));
      const errors = data.filter(row => row.length !== header.length);
      const correct = data.filter(row => row.length === header.length);
      setErrorRows(errors);
      setCorrectedRows(correct);
    };
    reader.readAsText(file);
  };

  return (
    <div className='container mx-auto p-4'>
      <h1 className='text-3xl font-bold mb-4'>CSV Analyser</h1>
      <input type='file' onChange={handleFileChange} className='mb-4' />
      <button onClick={processFile} className='bg-blue-500 text-white px-4 py-2 rounded'>Process File</button>
      <div className='grid grid-cols-2 gap-4 mt-8'>
        <div>
          <h2 className='text-xl font-semibold mb-2'>Error Rows</h2>
          {errorRows.map((row, i) => (
            <div key={i} className='bg-red-100 p-2 rounded mb-2'>
              {row.join(', ')}
            </div>
          ))}
        </div>
        <div>
          <h2 className='text-xl font-semibold mb-2'>Corrected Rows</h2>
          {correctedRows.map((row, i) => (
            <div key={i} className='bg-green-100 p-2 rounded mb-2'>
              {row.join(', ')}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;