58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
|
|
import "@/app/globals.css"
|
|
|
|
export default function Mesas() {
|
|
const [mesa, setMesa] = useState(""); // Mesa seleccionada
|
|
const [mantenimiento, setMantenimiento] = useState(false); // Checkbox Mantenimiento
|
|
const [mensaje, setMensaje] = useState(""); // Mensaje dinámico
|
|
|
|
const handleConfirmar = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
if (!mesa) {
|
|
setMensaje("Selecciona una mesa antes de confirmar");
|
|
return;
|
|
}
|
|
|
|
const estado = mantenimiento ? "en mantenimiento" : "disponible";
|
|
setMensaje(`Mesa ${mesa} confirmada como ${estado}`);
|
|
};
|
|
|
|
return (
|
|
<form className="containerForm" onSubmit={handleConfirmar}>
|
|
<label className="label">Mesas disponibles:</label>
|
|
<div className="groupInput" style={{display:"flex", flexDirection:"column"}}>
|
|
<select value={mesa} onChange={(e) => setMesa(e.target.value)}>
|
|
<option value="">-- Mesas disponibles --</option>
|
|
<option value="1">1</option>
|
|
<option value="4">4</option>
|
|
<option value="7">7</option>
|
|
<option value="10">10</option>
|
|
<option value="15">15</option>
|
|
</select>
|
|
|
|
<div className="checkbox-grid">
|
|
<label>
|
|
<input type="checkbox" />
|
|
Mantenimiento
|
|
</label>
|
|
</div>
|
|
|
|
{/* Botón Confirmar */}
|
|
<button
|
|
className="button buttonSearch"
|
|
type="submit"
|
|
style={{ marginTop: "15px" }}
|
|
>
|
|
Confirmar
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mensaje dinámico */}
|
|
{mensaje && <p style={{ marginTop: "20px" }}>{mensaje}</p>}
|
|
</form>
|
|
);
|
|
}
|
|
//IO
|