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