front-AT/app/Components/SelectAreas.tsx

"use client";
import axios from "axios";
import { useEffect, useState } from "react";

interface proms {
  url: string;
}

export default function SelectAreas(props: proms) {
  const [areas, setAreas] = useState([]);
  const [selectedArea, setSelectedArea] = useState("");

  useEffect(() => {
    axios
      .get(props.url)
      .then((data) => setAreas(data.data))
      .catch((error) => console.error("Error al traer las áreas:", error));
  }, []);

  return (
    <div>
      <label htmlFor="areaSelect">Selecciona un área:</label>
      <select
        id="areaSelect"
        value={selectedArea}
        onChange={(e) => setSelectedArea(e.target.value)}
      >
        <option value="">-- Selecciona una opción --</option>
        {areas.map((area: any, index) => (
          <option key={index} value={area.area}>
            {area.area}
          </option>
        ))}
      </select>
    </div>
  );
}