120 lines
3.9 KiB
Plaintext
120 lines
3.9 KiB
Plaintext
---
|
|
import DownloadPopup from './DownloadPopup.astro';
|
|
import Icon from './Icon.astro';
|
|
import RoadmapHint from './RoadmapHint.astro';
|
|
import RoadmapNote from './RoadmapNote.astro';
|
|
import SubscribePopup from './SubscribePopup.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;
|
|
---
|
|
|
|
<DownloadPopup />
|
|
<SubscribePopup />
|
|
|
|
<div class='border-b'>
|
|
<div class='py-5 sm:py-12 container relative'>
|
|
<YouTubeAlert />
|
|
|
|
<div class='mt-0 mb-3 sm:mb-4 sm:mt-4'>
|
|
<h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
|
|
{title}
|
|
</h1>
|
|
<p class='text-gray-500 text-sm sm:text-lg'>{description}</p>
|
|
</div>
|
|
|
|
<div class='flex justify-between'>
|
|
<div class='flex gap-1 sm:gap-2'>
|
|
{
|
|
!hasSearch && (
|
|
<>
|
|
<a
|
|
href='/roadmaps'
|
|
class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
|
|
aria-label='Back to All Roadmaps'
|
|
>
|
|
←<span class='hidden sm:inline'> All Roadmaps</span>
|
|
</a>
|
|
|
|
{isRoadmapReady && (
|
|
<button
|
|
data-popup='download-popup'
|
|
class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
|
|
aria-label='Download Roadmap'
|
|
ga-category='Subscription'
|
|
ga-action='Clicked Popup Opener'
|
|
ga-label='Download Roadmap Popup'
|
|
>
|
|
<Icon icon='download' />
|
|
<span class='hidden sm:inline ml-2'>Download</span>
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
data-popup='subscribe-popup'
|
|
class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
|
|
aria-label='Subscribe for Updates'
|
|
ga-category='Subscription'
|
|
ga-action='Clicked Popup Opener'
|
|
ga-label='Subscribe Roadmap Popup'
|
|
>
|
|
<Icon icon='email' />
|
|
<span class='ml-2'>Subscribe</span>
|
|
</button>
|
|
</>
|
|
)
|
|
}
|
|
|
|
{
|
|
hasSearch && (
|
|
<a
|
|
href={`/${roadmapId}`}
|
|
class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
|
|
aria-label='Back to Visual Roadmap'
|
|
>
|
|
←
|
|
<span class='inline'> 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 bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600'
|
|
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} />}
|