From 03da0ef24df6c8c4cbee391b0dc4a1d2acbba537 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 31 Dec 2022 19:56:34 +0400
Subject: [PATCH] Add topic overlay component

---
 .../InteractiveRoadmap.astro                  |  6 ++--
 src/components/TopicOverlay.astro             | 31 +++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TopicOverlay.astro

diff --git a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
index 550c4cc7f..e978ddd4d 100644
--- a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
+++ b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro
@@ -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 
+    <ShareIcons
       description={description}
       pageUrl={`https://roadmap.sh/${roadmapId}`}
     />
+    <TopicOverlay />
     <div
       id="roadmap-svg"
       style={`--aspect-ratio:${dimensions.width}/${dimensions.height}`}
diff --git a/src/components/TopicOverlay.astro b/src/components/TopicOverlay.astro
new file mode 100644
index 000000000..433745cef
--- /dev/null
+++ b/src/components/TopicOverlay.astro
@@ -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>
+  
\ No newline at end of file