YourPage.jsx

import IconFacebook from '../components/icons/IconFacebook'
import IconTwitter from '../components/icons/IconTwitter'

function YourPage() {
  const [hoveredIcons, setHoveredIcons] = useState({
    fb: false,
    tw: false,
    ig: false,
    pt: false,
  })

  /**
   * @param { 'fb' | 'tw' | 'ig' | 'pt' } icon
   * @returns { void }
   */
  function handleHoverIcons(icon) {
    setHoveredIcons({
      ...hoveredIcons,
      [icon]: !hoveredIcons[icon],
    })
  }

  return (
    <>
      <header>
        HEADER
      </header>
      <main>
        CONTENT
      </main>
      <footer>
        <button
          aria-label="Facebook"
          // อันนี้ท่ากึ่งๆ hard code
          onMouseEnter={() => setHoveredIcons({ ...hoveredIcons, fb: true })}
          onMouseLeave={() => setHoveredIcons({ ...hoveredIcons, fb: false })}
        >
          <IconFacebook fill={hoveredIcons.fb ? '#2E89FF' : 'white'} />
        </button>

        <button
          aria-label="Twitter"
          // อันนี้ powerful กว่า
          onMouseEnter={() => handleHoverIcons('tw')}
          onMouseLeave={() => handleHoverIcons('tw')}
        >
          <IconTwitter fill={hoveredIcons.tw ? '#1D9BF0' : 'white'} />
        </button>

        <button
          aria-label="Pinterest"
          onMouseEnter={() => handleHoverIcons('ig')}
          onMouseLeave={() => handleHoverIcons('ig')}
        >
          <IconPinterest fill={hoveredIcons.ig ? 'orangered' : 'white'} />
        </button>

        <button
          aria-label="Pinterest"
          onMouseEnter={() => handleHoverIcons('pt')}
          onMouseLeave={() => handleHoverIcons('pt')}
        >
          <IconPinterest fill={hoveredIcons.pt ? 'pink' : 'white'} />
        </button>
      </footer>
    </>
  )
}