148 lines
4.3 KiB
Plaintext
148 lines
4.3 KiB
Plaintext
---
|
|
import {
|
|
ArrowLeftIcon,
|
|
FolderKanbanIcon,
|
|
MapIcon,
|
|
MessageCircle,
|
|
} from 'lucide-react';
|
|
import { TabLink } from './TabLink';
|
|
import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
|
|
import { ScheduleButton } from './Schedule/ScheduleButton';
|
|
import ProgressHelpPopup from './ProgressHelpPopup.astro';
|
|
import { MarkFavorite } from './FeaturedItems/MarkFavorite';
|
|
import { type RoadmapFrontmatter } from '../lib/roadmap';
|
|
import { ShareRoadmapButton } from './ShareRoadmapButton';
|
|
import { DownloadRoadmapButton } from './DownloadRoadmapButton';
|
|
import { CourseAnnouncement } from './SQLCourse/CourseAnnouncement';
|
|
export interface Props {
|
|
title: string;
|
|
description: string;
|
|
note?: string;
|
|
tnsBannerLink?: string;
|
|
roadmapId: string;
|
|
isUpcoming?: boolean;
|
|
hasSearch?: boolean;
|
|
projectCount?: number;
|
|
question?: RoadmapFrontmatter['question'];
|
|
hasTopics?: boolean;
|
|
isForkable?: boolean;
|
|
activeTab?: 'roadmap' | 'projects';
|
|
}
|
|
|
|
const {
|
|
title,
|
|
description,
|
|
roadmapId,
|
|
tnsBannerLink,
|
|
isUpcoming = false,
|
|
note,
|
|
hasTopics = false,
|
|
projectCount = 0,
|
|
question,
|
|
activeTab = 'roadmap',
|
|
} = Astro.props;
|
|
|
|
const roadmapTitle =
|
|
roadmapId === 'devops'
|
|
? 'DevOps'
|
|
: `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
|
|
---
|
|
|
|
<LoginPopup />
|
|
<ProgressHelpPopup />
|
|
|
|
<div class='container mt-0 flex flex-col gap-2.5 px-0 sm:mt-3 sm:px-4'>
|
|
{
|
|
tnsBannerLink && (
|
|
<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>
|
|
Get the latest {roadmapTitle} news from our sister site{' '}
|
|
<a href={tnsBannerLink} target='_blank' class='font-medium underline'>
|
|
TheNewStack.io
|
|
</a>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<div
|
|
class='relative rounded-none border bg-white px-5 pb-0 pt-4 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'
|
|
>
|
|
← <span> All Roadmaps</span>
|
|
</a>
|
|
<div
|
|
class='relative right-0 top-0 flex items-center gap-1 sm:-right-2 sm:-top-0.5'
|
|
>
|
|
<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] hover:[&>svg]: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='mb-5 mt-5 sm:mb-12 sm:mt-12'>
|
|
<h1 class='mb-0.5 text-2xl font-bold sm:mb-3.5 sm:text-5xl'>
|
|
{title}
|
|
</h1>
|
|
<p class='text-balance text-sm text-gray-500 sm:text-lg'>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div class='flex justify-between gap-2 sm:gap-0'>
|
|
<div class='relative top-px flex gap-1 sm:gap-3'>
|
|
<TabLink
|
|
url={`/${roadmapId}`}
|
|
icon={MapIcon}
|
|
isActive={activeTab === 'roadmap'}
|
|
text='Roadmap'
|
|
/>
|
|
<TabLink
|
|
url={`/${roadmapId}/projects`}
|
|
icon={FolderKanbanIcon}
|
|
text='Projects'
|
|
isActive={activeTab === 'projects'}
|
|
badgeText={projectCount > 0 ? 'new' : 'soon'}
|
|
/>
|
|
</div>
|
|
|
|
<TabLink
|
|
url={`https://github.com/kamranahmedse/developer-roadmap/issues/new/choose`}
|
|
icon={MessageCircle}
|
|
text='Suggest Changes'
|
|
isExternal={true}
|
|
hideTextOnMobile={true}
|
|
isActive={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|