front-AT/app/Components/AsignacionMesas.tsx

"use client";
import axios from "axios";
import { useEffect, useState } from "react";
import { envConfig } from "../lib/config";

interface mesas {
  idMesa: number;
  active: number;
}
export default function AsignacionMesas() {
  const [tiempo, setTiempo] = useState("");
  const [mesa, setMesa] = useState<mesas[]>([]);

  useEffect(() => {
    const getMesa = async() => {
      const response = await axios.get(`${envConfig.apiUrl}/mesa/activo`);
      setMesa(response.data);
    };
    getMesa()
  }, []);

  return (
    <form className="containerForm">
      <label className="label">Mesas disponibles</label>
      <div className="groupInput">
        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
          <option value="">-- Mesas disponibles --</option>

          {mesa.map((mesa, key) => (
            <option key={key} value={mesa.idMesa}>{mesa.idMesa}</option>
          ))}
        </select>
        <button className="button buttonSearch" type="submit">
          Actualizar
        </button>
      </div>
    </form>
  );
}