Kamran Ahmed
2 years ago
parent
a5874bd057
commit
45a7aad669
9 changed files with 422 additions and 5 deletions
@ -0,0 +1,41 @@ |
||||
--- |
||||
import Icon from "./Icon.astro"; |
||||
|
||||
export interface Props { |
||||
roadmapUrl: string; |
||||
} |
||||
|
||||
const { roadmapUrl } = Astro.props; |
||||
--- |
||||
|
||||
<!-- Desktop: Roadmap Resources - Alert --> |
||||
<div |
||||
class="hidden sm:flex justify-between mb-0 sm:-mb-16 mt-7 px-2 bg-white border rounded-md items-center" |
||||
> |
||||
<p class="text-sm"> |
||||
<span |
||||
class="text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5" |
||||
>New</span |
||||
> |
||||
Resources are here, try clicking nodes |
||||
</p> |
||||
|
||||
<a |
||||
href={`${roadmapUrl}/topics`} |
||||
class="inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1" |
||||
> |
||||
<Icon icon="search" /> |
||||
<span class="ml-2">Search Topics</span> |
||||
</a> |
||||
</div> |
||||
|
||||
<!-- Mobile - Roadmap resources alert --> |
||||
<p |
||||
class="block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white mt-5 relative" |
||||
> |
||||
We have added resources. Try clicking roadmap nodes or visit{" "} |
||||
<a href={`${roadmapUrl}/topics`} class="text-blue-700 underline"> |
||||
resources list |
||||
</a> |
||||
. |
||||
</p> |
||||
@ -0,0 +1,106 @@ |
||||
--- |
||||
import Icon from "./Icon.astro"; |
||||
import ResourcesAlert from "./ResourcesAlert.astro"; |
||||
import TopicSearch from "./TopicSearch.astro"; |
||||
import YouTubeAlert from "./YouTubeAlert.astro"; |
||||
|
||||
export interface Props { |
||||
title: string; |
||||
description: string; |
||||
roadmapUrl: string; |
||||
isUpcoming?: boolean; |
||||
hasSearch?: boolean; |
||||
hasTopics?: boolean; |
||||
} |
||||
|
||||
const { |
||||
title, |
||||
description, |
||||
roadmapUrl, |
||||
isUpcoming = false, |
||||
hasSearch = false, |
||||
hasTopics = true, |
||||
} = Astro.props; |
||||
|
||||
const isRoadmapReady = !isUpcoming; |
||||
--- |
||||
|
||||
<div class="border-b"> |
||||
<div class="py-5 sm:py-12 container relative"> |
||||
<YouTubeAlert /> |
||||
|
||||
<div class="mt-0 mb-3 sm:mb-6 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-modal="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" |
||||
> |
||||
<Icon icon="download" /> |
||||
<span class="hidden sm:inline ml-2">Download</span> |
||||
</button> |
||||
)} |
||||
|
||||
<button |
||||
data-modal="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" |
||||
> |
||||
<Icon icon="email" /> |
||||
<span class="ml-2">Subscribe</span> |
||||
</button> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
{ |
||||
hasSearch && ( |
||||
<a |
||||
href={roadmapUrl} |
||||
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" /> |
||||
<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 && <ResourcesAlert roadmapUrl={roadmapUrl} />} |
||||
|
||||
{hasSearch && <TopicSearch />} |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,19 @@ |
||||
--- |
||||
import Icon from "./Icon.astro"; |
||||
--- |
||||
|
||||
<div class="sm:-mb-[68px] mt-5 sm:mt-6 relative"> |
||||
<input |
||||
autofocus |
||||
type="text" |
||||
id="search-topic-input" |
||||
class="border border-gray-300 text-gray-900 text-sm sm:text-md rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 sm:px-3 py-2" |
||||
placeholder="Search for a topic" |
||||
/> |
||||
|
||||
<span |
||||
class="absolute top-1/2 -translate-y-1/2 right-4 flex items-center text-sm text-gray-500" |
||||
> |
||||
<Icon icon="search" /> |
||||
</span> |
||||
</div> |
||||
@ -0,0 +1,12 @@ |
||||
<a |
||||
href="https://youtube.com/theroadmap?sub_confirmation=1" |
||||
target="_blank" |
||||
class="text-md hidden sm:flex items-center text-red-600 group hover:text-red-900" |
||||
> |
||||
<span |
||||
class="bg-red-600 group-hover:bg-red-800 group-hover: px-1.5 py-0.5 rounded-sm text-white text-xs uppercase font-medium mr-2" |
||||
>New</span |
||||
> |
||||
<span class="underline mr-1">Roadmap topics to be covered on YouTube</span> |
||||
<span>»</span> |
||||
</a> |
||||
Loading…
Reference in new issue