developer-roadmap/src/components/BestPracticeHeader.astro

---
import BestPracticeHint from './BestPracticeHint.astro';
import DownloadPopup from './DownloadPopup.astro';
import Icon from './Icon.astro';
import LoginPopup from './Login/LoginPopup.astro';
import SubscribePopup from './SubscribePopup.astro';

export interface Props {
  title: string;
  description: string;
  bestPracticeId: string;
  isUpcoming?: boolean;
}

const { title, description, bestPracticeId, isUpcoming = false } = Astro.props;
const isBestPracticeReady = !isUpcoming;
---

<LoginPopup />

<div class='border-b'>
  <div class='container relative py-5 sm:py-12'>
    <div class='mt-0 mb-3 sm:mb-6'>
      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
        {title}
      </h1>
      <p class='text-sm text-gray-500 sm:text-lg'>{description}</p>
    </div>

    <div class='flex justify-between'>
      <div class='flex gap-1 sm:gap-2'>
        <a
          href='/best-practices'
          class='rounded-md bg-gray-500 py-1.5 px-3 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
          aria-label='Back to All Best Practices'
        >
          &larr;<span class='hidden sm:inline'>&nbsp;All Best Practices</span>
        </a>

        {
          isBestPracticeReady && (
            <button
              id='download-button'
              data-popup='login-popup'
              class='inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
              aria-label='Download Roadmap'
              ga-category='Subscription'
              ga-action='Clicked Popup Opener'
              ga-label='Download Roadmap Popup'
            >
              <Icon icon='download' />
              <span class='ml-2 hidden sm:inline'>Download</span>
            </button>
          )
        }

        {
          isBestPracticeReady && (
            <a
              id='download-link'
              class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
              aria-label='Download Roadmap'
              ga-category='Subscription'
              ga-action='Clicked Popup Opener'
              ga-label='Download Roadmap Popup'
              href={`/best-practices/${bestPracticeId}.png`}
            >
              <Icon icon='download' />
              <span class='ml-2 hidden sm:inline'>Download</span>
            </a>
          )
        }

        <button
          id='subscribe-button'
          data-popup='login-popup'
          class='inline-flex items-center justify-center rounded-md bg-yellow-400 py-1.5 px-3 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
          aria-label='Subscribe for Updates'
          ga-category='Subscription'
          ga-action='Clicked Popup Opener'
          ga-label='Subscribe Best Practice Popup'
        >
          <Icon icon='email' />
          <span class='ml-2'>Subscribe</span>
        </button>
      </div>

      {
        isBestPracticeReady && (
          <a
            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
            target='_blank'
            class='inline-flex items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
            aria-label='Suggest Changes'
          >
            <Icon icon='comment' class='h-3 w-3' />
            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
            <span class='ml-2 inline sm:hidden'>Suggest</span>
          </a>
        )
      }
    </div>

    <BestPracticeHint bestPracticeId={bestPracticeId} />
  </div>
</div>

<script>
  import Cookies from 'js-cookie';
  import { TOKEN_COOKIE_NAME } from '../lib/constants';

  const subscribeButton = document.getElementById('subscribe-button');
  const downloadButton = document.getElementById('download-button');
  const downloadLink = document.getElementById('download-link');
  const token = Cookies.get(TOKEN_COOKIE_NAME);

  if (token) {
    subscribeButton?.classList.add('hidden');
    downloadButton?.classList.add('hidden');
    downloadLink?.classList.remove('hidden');
  }
</script>