site-profile/src/components/ui/buttons/SocialShare.astro

---
import Icon from '@components/ui/icons/icon.astro';

const { pageTitle, title = 'Share' } = Astro.props;

interface Props {
  pageTitle: string;
  title?: string;
}

type SocialPlatform = {
  name: string;
  url: string;
  svg: string;
};

const socialPlatforms: SocialPlatform[] = [
  {
    name: 'Facebook',
    url: `https://www.facebook.com/share.php?u=${Astro.url}&title=${pageTitle}`,
    svg: 'facebook',
  },
  {
    name: 'X',
    url: `https://twitter.com/home/?status=${pageTitle}${Astro.url}`,
    svg: 'x',
  },
  {
    name: 'LinkedIn',
    url: `https://www.linkedin.com/shareArticle?mini=true&url=${Astro.url}&title=${pageTitle}`,
    svg: 'linkedIn',
  },
];
---

<div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-left]">
  <button
    id="hs-dropup"
    type="button"
    class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 ring-neutral-500 transition duration-300 outline-none hover:bg-neutral-100 hover:text-neutral-700 focus-visible:ring dark:text-neutral-400 dark:ring-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:outline-none"
  >
    <Icon name="share" />

    {title}
  </button>

  <div
    class="hs-dropdown-menu duration hs-dropdown-open:opacity-100 z-10 hidden w-72 divide-y divide-neutral-200 rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
    aria-labelledby="hs-dropup"
  >
    <div class="py-2 first:pt-0 last:pb-0">
      {
        socialPlatforms.map((platform) => (
          <a
            class="flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100 focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
            href={platform.url}
          >
            <Icon name={platform.svg} />
            Share on {platform.name}
          </a>
        ))
      }
    </div>
    <div class="py-2 first:pt-0 last:pb-0">
      <button
        type="button"
        class="js-clipboard hover:text-dark focus-visible:ring-secondary group inline-flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100 focus:outline-none focus-visible:ring-1 focus-visible:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
        data-clipboard-success-text="Copied"
      >
        <svg
          class="js-clipboard-default h-4 w-4 transition group-hover:rotate-6"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
          <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
        </svg>

        <svg
          class="js-clipboard-success hidden h-4 w-4 text-neutral-700 dark:text-neutral-300"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="js-clipboard-success-text">Copy link</span>
      </button>
    </div>
  </div>
</div>

<!--Import the necessary Dropdown and Clipboard plugins-->
<!--https://preline.co/plugins/html/dropdown.html-->
<!--<script is:inline src="/scripts/vendor/preline/dropdown/index.js"></script>-->

<!-- https://clipboardjs.com/ -->
<!--<script is:inline src="/scripts/vendor/clipboard.min.js"></script>-->

<script is:inline>
  (function () {
    window.addEventListener('load', () => {
      const $clipboards = document.querySelectorAll('.js-clipboard');
      $clipboards.forEach((el) => {
        const clipboard = new ClipboardJS(el, {
          text: () => {
            return window.location.href;
          },
        });
        clipboard.on('success', () => {
          const $default = el.querySelector('.js-clipboard-default');
          const $success = el.querySelector('.js-clipboard-success');
          const $successText = el.querySelector('.js-clipboard-success-text');
          const successText = el.dataset.clipboardSuccessText || '';
          let oldSuccessText;

          if ($successText) {
            oldSuccessText = $successText.textContent;
            $successText.textContent = successText;
          }
          if ($default && $success) {
            $default.style.display = 'none';
            $success.style.display = 'block';
          }

          setTimeout(() => {
            if ($successText && oldSuccessText) {
              $successText.textContent = oldSuccessText;
            }
            if ($default && $success) {
              $success.style.display = '';
              $default.style.display = '';
            }
          }, 800);
        });
      });
    });
  })();
</script>