developer-roadmap/src/components/RoadmapHeader.astro

---
import {
  ArrowLeftIcon,
  BookOpenIcon,
  Bot,
  FolderKanbanIcon,
  MapIcon,
} from 'lucide-react';
import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
import { DownloadRoadmapButton } from './DownloadRoadmapButton';
import { MarkFavorite } from './FeaturedItems/MarkFavorite';
import ProgressHelpPopup from './ProgressHelpPopup.astro';
import { ScheduleButton } from './Schedule/ScheduleButton';
import { ShareRoadmapButton } from './ShareRoadmapButton';
import { TabLink } from './TabLink';
import { PersonalizedRoadmap } from './PersonalizedRoadmap/PersonalizedRoadmap';
import RoadmapFeedbackAlert from './Roadmaps/RoadmapFeedbackAlert.astro';
import {markdownToHtml} from '../lib/markdown';

export interface Props {
  title: string;
  description: string;
  partner?: {
    description: string;
    link: string;
    linkText: string;
  };
  roadmapId: string;
  hasSearch?: boolean;
  projectCount?: number;
  coursesCount?: number;
  hasAIChat?: boolean;
  isForkable?: boolean;
  isNew?: boolean;
  activeTab?: 'roadmap' | 'projects' | 'courses';
}

const {
  title,
  description,
  roadmapId,
  partner,
  hasAIChat = false,
  projectCount = 0,
  activeTab = 'roadmap',
  coursesCount = 0,
  isNew = false,
} = Astro.props;

const hasCourses = coursesCount > 0;
const hasProjects = projectCount > 0;
---

<LoginPopup />
<ProgressHelpPopup />

<div class='container mt-0 flex flex-col gap-2.5 px-0 sm:mt-3 sm:px-4'>
  {
    partner && (
      <div class='hidden rounded-md border bg-white px-2 py-1.5 sm:block'>
        <p class='py-0.5 text-left text-sm'>
          <span class='badge mr-1'>Partner</span>
          {partner.description}
          <a href={partner.link} target='_blank' class='font-medium underline'>
            {partner.linkText}
          </a>
        </p>
      </div>
    )
  }

  {isNew && <RoadmapFeedbackAlert roadmapId={roadmapId} title={title} />}

  <div
    class='relative rounded-none border bg-white px-5 pt-4 pb-0 sm:rounded-lg'
  >
    <div class='flex items-start justify-between'>
      <a
        class='inline-flex items-center justify-center rounded-md bg-gray-300 px-2 py-1.5 text-xs font-medium hover:bg-gray-400 sm:hidden sm:text-sm'
        aria-label='Back to roadmaps'
        href={'/roadmaps'}
      >
        <ArrowLeftIcon className='h-4 w-4' />
      </a>

      <a
        href='/roadmaps'
        class='hidden rounded-md text-sm font-medium text-gray-500 transition-all hover:text-black focus:outline-0 sm:block'
        aria-label='Back to All Roadmaps'
      >
        &larr;&nbsp;<span>&nbsp;All Roadmaps</span>
      </a>
      <div
        class='relative top-0 right-0 flex items-center gap-1 sm:-top-0.5 sm:-right-2'
      >
        <MarkFavorite
          resourceId={roadmapId}
          resourceType='roadmap'
          className='relative top-px mr-2 text-gray-500 opacity-100! hover:text-gray-600 focus:outline-0 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-gray-400 [&>svg]:stroke-[0.4] [&>svg]:hover:stroke-gray-600 sm:[&>svg]:h-4 sm:[&>svg]:w-4'
          client:only='react'
        />
        <ScheduleButton
          resourceId={roadmapId}
          resourceType='roadmap'
          resourceTitle={title}
          client:load
        />
        <DownloadRoadmapButton roadmapId={roadmapId} client:idle />
        <ShareRoadmapButton
          description={description}
          pageUrl={`https://roadmap.sh/${roadmapId}`}
          client:idle
        />
      </div>
    </div>
    <div class:list={['mt-5 mb-5 sm:mt-12 sm:mb-12']}>
      <h1 class='mb-0.5 text-2xl font-bold sm:mb-3.5 sm:text-5xl'>
        {title}
      </h1>
      <p class='text-sm text-balance text-gray-500 sm:text-lg' set:html={markdownToHtml(description)}>
        
      </p>
    </div>

    {
      (
        <div class='flex justify-between gap-2 sm:gap-0'>
          <div class='relative top-px flex gap-1 sm:gap-2'>
            <TabLink
              url={`/${roadmapId}`}
              icon={MapIcon}
              isActive={activeTab === 'roadmap'}
              text='Roadmap'
            />
            {hasProjects && (
              <TabLink
                url={`/${roadmapId}/projects`}
                icon={FolderKanbanIcon}
                text='Projects'
                isActive={activeTab === 'projects'}
                badgeText={projectCount > 0 ? '' : 'soon'}
              />
            )}
            {hasCourses && (
              <TabLink
                url={`/${roadmapId}/courses`}
                icon={BookOpenIcon}
                text='Courses'
                isActive={activeTab === 'courses'}
                className='hidden md:flex'
              />
            )}
            {hasAIChat && (
              <TabLink
                url={`/ai/roadmap-chat/${roadmapId}`}
                icon={Bot}
                text='AI Tutor'
                mobileText='AI'
                isActive={false}
              />
            )}
          </div>

          <PersonalizedRoadmap roadmapId={roadmapId} client:load />
        </div>
      )
    }
  </div>
</div>