---
import Icon from './AstroIcon.astro';
---

<!-- sticky top-0 -->
<div class='border-b border-b-yellow-300 z-20 flex h-[37px]' youtube-banner>
  <a
    href='https://youtube.com/theroadmap?sub_confirmation=1'
    target='_blank'
    class='flex bg-yellow-200 text-center flex-1 items-center justify-center text-sm hover:bg-yellow-300 outline-0'
  >
    <Icon icon='youtube' class='mr-2' /> We now have a YouTube Channel.&nbsp;<span class='hidden sm:inline'
      >Subscribe for the video content.</span
    >
  </a>
  <button
    class='text-yellow-500 bg-yellow-200 hover:text-yellow-900 hover:bg-yellow-400 outline-0 px-2'
    aria-label='Close'
    close-youtube-banner
  >
    <Icon icon='close' />
  </button>
</div>

<script>
  document.querySelector('[close-youtube-banner]')?.addEventListener('click', () => {
    document.querySelector('[youtube-banner]')?.remove();
  });
</script>