developer-roadmap/src/components/RoadmapHeader.astro

---
import Icon from './AstroIcon.astro';
import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
import RoadmapHint from './RoadmapHint.astro';
import RoadmapNote from './RoadmapNote.astro';
import TopicSearch from './TopicSearch/TopicSearch.astro';
import YouTubeAlert from './YouTubeAlert.astro';

export interface Props {
  title: string;
  description: string;
  note?: string;
  tnsBannerLink?: string;
  roadmapId: string;
  isUpcoming?: boolean;
  hasSearch?: boolean;
  hasTopics?: boolean;
}

const {
  title,
  description,
  roadmapId,
  tnsBannerLink,
  isUpcoming = false,
  hasSearch = false,
  note,
  hasTopics = false,
} = Astro.props;

const isRoadmapReady = !isUpcoming;
---

<LoginPopup />

<div class='border-b'>
  <div class='container relative py-5 sm:py-12'>
    <YouTubeAlert />

    <div class='mb-3 mt-0 sm:mb-4 sm:mt-4'>
      <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'>
        {
          !hasSearch && (
            <>
              <a
                href='/roadmaps'
                class='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='Back to All Roadmaps'
              >
                &larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span>
              </a>

              {isRoadmapReady && (
                <>
                  <button
                    data-guest-required
                    data-popup='login-popup'
                    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'
                  >
                    <Icon icon='download' />
                    <span class='ml-2 hidden sm:inline'>Download</span>
                  </button>

                  <a
                    data-auth-required
                    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'
                    target='_blank'
                    href={`/pdfs/roadmaps/${roadmapId}.pdf`}
                  >
                    <Icon icon='download' />
                    <span class='ml-2 hidden sm:inline'>Download</span>
                  </a>
                </>
              )}

              <button
                data-guest-required
                data-popup='login-popup'
                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='Subscribe for Updates'
              >
                <Icon icon='email' />
                <span class='ml-2'>Subscribe</span>
              </button>
            </>
          )
        }

        {
          hasSearch && (
            <a
              href={`/${roadmapId}`}
              class='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='Back to Visual Roadmap'
            >
              &larr;
              <span class='inline'>&nbsp;Visual Roadmap</span>
            </a>
          )
        }
      </div>

      {
        isRoadmapReady && (
          <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>

    <!-- Desktop: Roadmap Resources - Alert -->
    {
      hasTopics && (
        <RoadmapHint roadmapId={roadmapId} tnsBannerLink={tnsBannerLink} />
      )
    }

    {hasSearch && <TopicSearch />}
  </div>
</div>

{note && <RoadmapNote text={note} />}