Art Deco Like/Reaction Buttons 컴포넌트

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">

  <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl border-t-4 border-b-4 border-amber-600 dark:border-amber-500 w-full max-w-sm mx-auto transition-colors duration-300">
    <div class="flex justify-around items-center border-t border-b border-gray-300 dark:border-gray-700 py-4 mb-4 relative overflow-hidden">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 pointer-events-none opacity-5 dark:opacity-10">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <rect x="0" y="0" width="100" height="100" fill="none" />
          <path d="M0 0 L10 10 L0 20 Z M100 0 L90 10 L100 20 Z M0 100 L10 90 L0 80 Z M100 100 L90 90 L100 80 Z M50 0 L40 10 L60 10 L50 0 Z M50 100 L40 90 L60 90 L50 100 Z" fill="currentColor" class="text-gray-400 dark:text-gray-600"/>
          <path d="M20 5 L25 0 L30 5 Z M70 5 L75 0 L80 5 Z M20 95 L25 100 L30 95 Z M70 95 L75 100 L80 95 Z M5 20 L0 25 L5 30 Z M95 20 L100 25 L95 30 Z M5 70 L0 75 L5 80 Z M95 70 L100 75 L95 80 Z" fill="currentColor" class="text-gray-400 dark:text-gray-600"/>
        </svg>
      </div>

      <button aria-label="Like Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:scale-110 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Like</span>
      </button>

      <button aria-label="Clap Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:rotate-12 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M15 1H9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-1 8h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2zm-6 8h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2zm12 0h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Clap</span>
      </button>

      <button aria-label="Boom Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:-translate-y-1 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.9L9.1 16H8a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h1.1L11 6.1H8V4h8v2.1l-2 3.8h1c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1h-1.1l2 3.8H16v2h-4z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Boom!</span>
      </button>
    </div>

    <div class="text-center text-gray-700 dark:text-gray-300">
      <p class="text-lg font-semibold tracking-wider uppercase text-amber-800 dark:text-amber-400">Show Your Support!</p>
      <p class="text-sm mt-2 text-gray-500 dark:text-gray-400">Engage with our latest updates and achievements.</p>
    </div>
  </div>

</div>