feat: enhance CursosArchivo component to parse CSV files and display extracted content

diplomas/src/components/formularios/CursosArchivo.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
+import Papa from 'papaparse';
 
-const Cursos = () => {
+const CursosArchivo = () => {
   const [modoManual, setModoManual] = useState(true);
   const [archivo, setArchivo] = useState(null);
+  const [datosCSV, setDatosCSV] = useState([]);
 
   const manejarArchivo = (e) => {
     const file = e.target.files[0];
@@ -20,8 +22,19 @@ const Cursos = () => {
   };
 
   const extraerContenido = () => {
-    // Lógica para procesar el archivo
-    console.log('Archivo seleccionado:', archivo);
+    if (!archivo) return;
+
+    Papa.parse(archivo, {
+      header: true,
+      skipEmptyLines: true,
+      complete: (result) => {
+        console.log('Contenido CSV:', result.data);
+        setDatosCSV(result.data);
+      },
+      error: (error) => {
+        console.error('Error al leer el CSV:', error.message);
+      }
+    });
   };
 
   return (
@@ -57,6 +70,7 @@ const Cursos = () => {
             <input
               type="file"
               id="archivo"
+              accept=".csv"
               onChange={manejarArchivo}
               className="hidden"
             />
@@ -68,10 +82,19 @@ const Cursos = () => {
           >
             Extraer contenido
           </button>
+
+          {datosCSV.length > 0 && (
+            <div className="mt-6 text-left w-full max-w-md">
+              <h3 className="font-bold mb-2">Contenido extraído:</h3>
+              <pre className="bg-gray-100 p-2 rounded overflow-x-auto text-sm">
+                {JSON.stringify(datosCSV, null, 2)}
+              </pre>
+            </div>
+          )}
         </div>
       )}
     </div>
   );
 };
 
-export default Cursos;
+export default CursosArchivo;