92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import styleprograms from "./programas.module.css";
|
|
|
|
export default function Page() {
|
|
const [modo, setModo] = useState("ver");
|
|
|
|
const handleNuevo = () => {
|
|
setModo("nuevo");
|
|
};
|
|
|
|
const handleEditar = () => {
|
|
setModo("editar");
|
|
};
|
|
|
|
const handleCancelar = () => {
|
|
setModo("ver");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{modo === "ver" && (
|
|
<section className="containersection">
|
|
<h3 className="title">PROGRAMAS</h3>
|
|
<label className="label">ID:2</label>
|
|
<h2>Programa</h2>
|
|
<select>
|
|
<option value="0"></option>
|
|
<option value="1">ADOBE CREATIVE SUITE</option>
|
|
<option value="2">mmmmm</option>
|
|
<option value="3">mmmmm</option>
|
|
<option value="4">mmmmm</option>
|
|
<option value="5">mmmmm</option>
|
|
</select>
|
|
<div className="margin">
|
|
<button className="button buttonSearch" onClick={handleEditar}>
|
|
Editar
|
|
</button>
|
|
<button
|
|
className={`button buttonSearch ${styleprograms.button}`}
|
|
onClick={handleNuevo}
|
|
>
|
|
Nuevo
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{modo === "editar" && (
|
|
<section className="containersection">
|
|
<h2 className="title">Editar Programa:</h2>
|
|
<label className="label">ID:2</label>
|
|
<select>
|
|
<option value="0">Elige</option>
|
|
<option value="1">ADOBE CREATIVE</option>
|
|
<option value="2">.....</option>
|
|
<option value="3">.....</option>
|
|
<option value="4">.....</option>
|
|
<option value="5">.....</option>
|
|
</select>
|
|
<div className="margin">
|
|
<button className="button buttonSearch">Guardar</button>
|
|
<button
|
|
className={`button buttonCancel ${styleprograms.button}`}
|
|
onClick={handleCancelar}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{modo === "nuevo" && (
|
|
<section className="containersection">
|
|
<h2 className="title">Nuevo Programa</h2>
|
|
<label className="label">Programa</label>
|
|
<input type="text" placeholder="Coloca el programa " />
|
|
<div className="margin">
|
|
<button className="button buttonSearch">Insertar</button>
|
|
<button
|
|
className={`button buttonCancel ${styleprograms.button}`}
|
|
onClick={handleCancelar}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</>
|
|
);
|
|
}
|