feat: implement Cursos component with manual and file upload options
This commit is contained in:
parent
405852fd4a
commit
0ba3f2e898
diplomas/src/components/formularios
|
@ -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 (
|
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;
|
||||||
|
|
Loading…
Reference in New Issue