info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-19 15:43:49 +02:00
Code Issues Releases Wiki Activity

Add topic overlay component

Browse Source
This commit is contained in:
Kamran Ahmed
2022-12-31 19:56:34 +04:00
parent 0932f36953
commit 03da0ef24d
2 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/InteractiveRoadmap/InteractiveRoadmap.astro
View File

@@ -1,6 +1,7 @@
---
import Loader from "../Loader.astro";
import ShareIcons from "../ShareIcons.astro";
import TopicOverlay from "../TopicOverlay.astro";
import "./InteractiveRoadmap.css";
export interface Props {
@@ -27,12 +28,13 @@ const { roadmapId, jsonUrl, dimensions, description, roadmapPermalink } =
slot="after-header"
/>
<div class='bg-gray-50 py-4 sm:py-10'>
<div class="bg-gray-50 py-4 sm:py-10">
<div class="max-w-[1000px] container relative">
<ShareIcons
description={description}
pageUrl={`https://roadmap.sh/${roadmapId}`}
/>
<TopicOverlay />
<div
id="roadmap-svg"
style={`--aspect-ratio:${dimensions.width}/${dimensions.height}`}

31
src/components/TopicOverlay.astro Normal file
View File

@@ -0,0 +1,31 @@
---
import Icon from "./Icon.astro";
import Loader from "./Loader.astro";
---
<div id='topic-overlay' class='hidden'>
<div class="fixed top-0 right-0 z-40 h-screen p-4 sm:p-6 overflow-y-auto bg-white w-full sm:max-w-[600px]" tabindex="-1" id='topic-body'>
<div id='topic-loader' class='hidden'>
<Loader />
</div>
<div id='topic-actions' class='hidden mb-2'>
<button id='mark-topic-done' class='bg-green-600 text-white p-1 px-2 text-sm rounded-md hover:bg-green-700 inline-flex items-center'>
<Icon icon="check" /> <span class='ml-2'>Mark as Done</span>
</button>
<button id='mark-topic-pending' class='hidden bg-red-600 text-white p-1 px-2 text-sm rounded-md hover:bg-red-700 inline-flex items-center'>
<Icon icon="reset" /> <span class='ml-2'>Mark as Pending</span>
</button>
<button type="button" id='close-topic' class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center">
<Icon icon="close" />
</button>
</div>
<div id='topic-content' class='-mt-2'></div>
</div>
<div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30"></div>
</div>