import { useState } from 'react'

function App() {
  const [text, setText] = useState('ボタンをクリックしてください！')
  const [isClicked, setIsClicked] = useState(false)

  const handleClick = () => {
    setText('ボタンがクリックされました。')
    setIsClicked(true)
  }

  return (
    <>
      <h1>{text}</h1>
      <button className={`text-white my-4 py-2 px-4 rounded ${
        isClicked ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-400'
      }`} onClick={handleClick} disabled={isClicked}>
        button
      </button>
    </>
  )
}

export default App