Merge branch 'Santiago' of https://git.gumoio.com/benito.rodriguez/SIDAC into roberto

diplomas/src/components/formularios/CursosArchivo.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-function CursosArchivo() {
-  return (
-    <div>CursosArchivo</div>
-  )
-}
-
-export default CursosArchivo

diplomas/src/components/formularios/CursosManual.jsx

@@ -1,49 +0,0 @@
-import React, { useState } from "react";
-
-const CursosManual = () => {
-  const [nombre, setNombre] = useState("");
-  const [descripcion, setDescripcion] = useState("");
-  const [competencia, setCompetencia] = useState("");
-  const manejarGuardar = () => {
-    // Lógica para guardar el curso
-    console.log({ nombre, descripcion, competencia });
-  };
-
-  return (
-    <div className="p-8 font-sans text-center">
-      <div className="max-w-md mx-auto bg-white p-6 rounded-md shadow">
-        <h2 className="text-xl font-semibold mb-4">Nuevo curso</h2>
-        <input
-          type="text"
-          placeholder="Nombre del curso"
-          value={nombre}
-          onChange={(e) => setNombre(e.target.value)}
-          className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3"
-        />
-        <textarea
-          placeholder="Descripción"
-          value={descripcion}
-          onChange={(e) => setDescripcion(e.target.value)}
-          className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24"
-        />
-        <select
-          value={competencia}
-          onChange={(e) => setCompetencia(e.target.value)}
-          className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4"
-        >
-          <option value="">Competencia</option>
-          <option value="competencia1">Competencia 1</option>
-          <option value="competencia2">Competencia 2</option>
-        </select>
-        <button
-          onClick={manejarGuardar}
-          className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
-        >
-          Guardar
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default CursosManual;

diplomas/src/pages/cursosArchivo.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import Papa from 'papaparse';
+
+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];
+    setArchivo(file);
+  };
+
+  const manejarSoltar = (e) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files[0];
+    setArchivo(file);
+  };
+
+  const manejarArrastrar = (e) => {
+    e.preventDefault();
+  };
+
+  const extraerContenido = () => {
+    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 (
+    <div className="p-8 font-sans text-center">
+      <div className="mb-6">
+        <button
+          onClick={() => setModoManual(true)}
+          className={`px-4 py-2 rounded-md mr-2 ${
+            modoManual ? 'bg-blue-300' : 'bg-gray-300'
+          }`}
+        >
+          Añadir curso manualmente
+        </button>
+        <button
+          onClick={() => setModoManual(false)}
+          className={`px-4 py-2 rounded-md ${
+            !modoManual ? 'bg-blue-300' : 'bg-gray-300'
+          }`}
+        >
+          Añadir curso desde archivo
+        </button>
+      </div>
+
+      {!modoManual && (
+        <div className="flex flex-col items-center">
+          <label
+            htmlFor="archivo"
+            onDrop={manejarSoltar}
+            onDragOver={manejarArrastrar}
+            className="border-2 border-gray-300 rounded-md p-8 text-gray-600 cursor-pointer w-80 text-center mb-4"
+          >
+            Arrastra y suelta un archivo o busca un archivo
+            <input
+              type="file"
+              id="archivo"
+              accept=".csv"
+              onChange={manejarArchivo}
+              className="hidden"
+            />
+          </label>
+
+          <button
+            onClick={extraerContenido}
+            className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
+          >
+            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 CursosArchivo;

diplomas/src/pages/cursosManual.jsx

@@ -1,14 +1,3 @@
-import Layout from "@/components/layout/Layout";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
 import React, { useState } from "react";
 import { supabase } from "@/lib/supabaseClient"; 
 
@@ -85,7 +74,7 @@ const CursosManual = () => {
           </Button>
         </div>
       </div>
-    </Layout>
+    </div>
   );
 };