feat: implement Cursos component for course management with manual and file upload options
This commit is contained in:
parent
32ae5317f0
commit
75fe763b52
diplomas/src/components/formularios
|
@ -0,0 +1,72 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const Cursos = () => {
|
||||||
|
const [modoManual, setModoManual] = useState(true);
|
||||||
|
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="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="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 Cursos;
|
Loading…
Reference in New Issue