ソーシャル共有ボタンコンポーネント - 音楽/オーディオ

<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Share This Track</h3>
  <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">

    <!-- Facebook Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-blue-300 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on Facebook">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.64-.75 10-5.494 10-10z" clip-rule="evenodd" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Facebook</span>
    </a>

    <!-- Twitter Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-sky-300 hover:bg-sky-400 dark:bg-sky-600 dark:hover:bg-sky-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on Twitter">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.007-.531.807-.582 1.515-1.31 2.072-2.124-.741.329-1.532.547-2.35.648a4.332 4.332 0 001.956-2.269c-.767.429-1.62.735-2.514.896a4.36 4.36 0 00-7.712 2.923c0 .337.04.668.12 1.0H3.38c-.374 0-.742-.03-.9-.08C2.56 12.378 2 13.9 2 15.467c0 2.2.945 4.14 2.44 5.234A4.326 4.326 0 012 19.129c.655.109 1.3.178 1.954.178.69 0 1.36-.088 2.01-.256C5.58 20.088 6.94 20.251 8.29 20.251z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Twitter</span>
    </a>

    <!-- Email Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-teal-300 hover:bg-teal-400 dark:bg-teal-600 dark:hover:bg-teal-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share via Email">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M.05 3.555A2 2 0 012 2h20a2 2 0 011.95 1.555L12 12.032.05 3.555zM0 4.67V19a2 2 0 002 2h20a2 2 0 002-2V4.67l-12 7.7L0 4.67z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Email</span>
    </a>

    <!-- WhatsApp Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-green-300 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on WhatsApp">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12.046 2c-5.466 0-9.917 4.451-9.917 9.917 0 1.758.463 3.447 1.341 4.93L.5 22.5l5.068-1.579c1.42.793 3.023 1.258 4.708 1.258 5.467 0 9.917-4.451 9.917-9.917C21.963 6.45 17.512 2 12.046 2zm0 1.83c4.462 0 8.087 3.626 8.087 8.087 0 4.46-3.625 8.086-8.087 8.086-1.585 0-3.08-.458-4.364-1.25l-.265-.157-2.75 1.0L5.3 18.067l-.173-.284c-.878-1.425-1.353-3.03-1.353-4.733.001-4.461 3.626-8.086 8.087-8.086zm.135 3.42c-2.274 0-3.238 1.905-3.32 2.01-.06.07-.37.178-.506.11-.137-.067-.384-.14-.543.08-.22.29-.444.6-.607.78-.17.18-.344.382-.09.845.248.463.78 1.054 1.455 1.62.903.75 1.761 1.052 2.378 1.15.58.093 1.077.067 1.488-.168.411-.234.8-1.006 1.107-1.493.307-.487.31-.6.216-.78-.094-.18-.266-.43-.377-.57-.11-.14-.236-.26-.118-.46.118-.2.83-.997.94-.997.108 0 .61.08.7.207.088.127.568 1.54 1.077 1.85.51.31 1.218.423 1.246.257.03-.166-.35-.607-.78-1.43z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">WhatsApp</span>
    </a>

    <!-- Copy Link Button -->
    <button onclick="copyToClipboard('https://example.com/track-link')" class="flex items-center justify-center p-3 rounded-lg bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50"
      aria-label="Copy link to clipboard">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 10c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h6c.552 0 1 .448 1 1v4z" />
        <path fill-rule="evenodd" d="M9 20h9c1.105 0 2-.895 2-2V8h-2v10H9v2zm-4 0h9V6c0-1.105-.895-2-2-2H5c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2zm2-14h6.002a2 2 0 011.996 2v6.002a2 2 0 01-2 2H7.002a2 2 0 01-2-2V8.002a2 2 0 012-2z" clip-rule="evenodd" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Copy Link</span>
    </button>

    <!-- More Options Button -->
    <button class="flex items-center justify-center p-3 rounded-lg bg-indigo-300 hover:bg-indigo-400 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
      aria-label="More sharing options">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 5a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">More</span>
    </button>
  </div>

  <!-- Optional: Hidden input for copy to clipboard functionality -->
  <input type="text" id="trackLinkInput" class="absolute opacity-0 pointer-events-none" value="">

  <script>
    function copyToClipboard(text) {
      const input = document.getElementById('trackLinkInput');
      input.value = text;
      input.select();
      document.execCommand('copy');
      alert('Link copied to clipboard!'); // Simple feedback for user
    }
  </script>
</div>