플레이스토어 병아리게임 출시!!!~~ [많은 이용 부탁드립니다!]

const cities = [
    {id: 1, name: "#전체"},
    {id: 2, name: "#서울"},
    {id: 3, name: "#경기"},
    {id: 4, name: "#인천"}
]

function Main() {

    const [selectedCity, setSelectedCity] = useState(cities[0].id);

    const selectCity = (cityId:number) => {
        setSelectedCity(cityId)
    }
    
    return <div>
        {cities.map((city) =>
        <button className={city.id === selectedCity ? "bg-blue-500 hover:bg-blue-700 text-white p-1 rounded-full mx-2" : "mx-2"}
                key={city.id}
                onClick={() => selectCity(city.id)}>
            {city.name}
        </button>)}
    </div>
}