alpine-clipboard-directive.js

// Directive: x-clipboard
Alpine.directive('clipboard', async (el, { expression }) => {
  el.addEventListener('click', async () => {
    await navigator.clipboard.writeText(expression);
    document.dispatchEvent(
      new CustomEvent('banner-message', { detail: { style: 'success', message: 'Copied to clipboard!' } })
    );
  });
});