Stackoverflow 67721192

import React, { useState } from "react";

export const TopOptions = () => {
  const [clickedButton, setClickedButton] = useState(1);

  const buttons = ["DELIVERY", "TAKEAWAY", "DINE IN"];

  return (
    <>
      <div className="flex flex-col border-b shadow-lg">
        <div className="flex flex-col px-4">
          <p className="text-xs pl-6 pt-4">PUNE</p>
          <div className="flex flex-row items-center">
            <select className="pl-2">
              <option value="Kothrud Outlet">Kothrud Outlet</option>
            </select>
          </div>
        </div>
        <div
          className=" bg-gray-100 my-5 text-center flex flex-row items-center justify-evenly text-sm rounded-md mx-4">
          {buttons.map((btn, index) => (
            <button className={"w-full py-3 font-bold " + (clickedButton === index ? "" : "text-gray-600")}
                    onClick={() => {
                      setClickedButton(index);
                    }} key={"btn" + index}
            >{btn}</button>
          ))}
        </div>
      </div>
    </>
  );
};