feat: implement Cursos component with manual and file upload options

diplomas/src/components/formularios/CursosArchivo.jsx

@@ -1,9 +1,77 @@
-import React from 'react'
+import React, { useState } from 'react';
+
+const Cursos = () => {
+  const [modoManual, setModoManual] = useState(true);
+  const [archivo, setArchivo] = useState(null);
+
+  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 = () => {
+    // Lógica para procesar el archivo
+    console.log('Archivo seleccionado:', archivo);
+  };
 
-function CursosArchivo() {
   return (
-    <div>CursosArchivo</div>
-  )
-}
+    <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>
 
-export default CursosArchivo
+      {!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"
+              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>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Cursos;