From 6d58cb9a019ae0b94195157b5523b86b40a4e737 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 26 Aug 2024 17:06:39 +0100
Subject: [PATCH] Add back button on the projects navigation

---
 src/components/Projects/ProjectTabs.tsx       | 18 ++++++++++++---
 src/pages/projects/[projectId]/index.astro    | 22 +++++++++++++------
 .../projects/[projectId]/solutions.astro      |  4 +++-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/components/Projects/ProjectTabs.tsx b/src/components/Projects/ProjectTabs.tsx
index 9c9931d0d..1c7350b07 100644
--- a/src/components/Projects/ProjectTabs.tsx
+++ b/src/components/Projects/ProjectTabs.tsx
@@ -1,8 +1,10 @@
 import { cn } from '../../lib/classname';
 import {
+  ArrowLeft,
   Blocks,
   BoxSelect,
   type LucideIcon,
+  StepBackIcon,
   StickyNote,
   Text,
 } from 'lucide-react';
@@ -34,7 +36,7 @@ function TabButton(props: TabButtonProps) {
       {smText && <span className="sm:hidden">{smText}</span>}
 
       {isActive && (
-        <span className="absolute bottom-0 left-0 right-0 h-0.5 translate-y-1/2 bg-black rounded-t-md"></span>
+        <span className="absolute bottom-0 left-0 right-0 h-0.5 translate-y-1/2 rounded-t-md bg-black"></span>
       )}
     </a>
   );
@@ -43,13 +45,23 @@ function TabButton(props: TabButtonProps) {
 type ProjectTabsProps = {
   activeTab: AllowedProjectTab;
   projectId: string;
+  parentRoadmapId?: string;
 };
 
 export function ProjectTabs(props: ProjectTabsProps) {
-  const { activeTab, projectId } = props;
+  const { activeTab, parentRoadmapId, projectId } = props;
 
   return (
-    <div className="my-3 flex flex-row flex-wrap items-center gap-1.5 rounded-md border bg-white px-2.5 text-sm">
+    <div className="my-3 flex flex-row flex-wrap items-center gap-1.5 overflow-hidden rounded-md border bg-white px-2.5 text-sm">
+      <a
+        href={`/${parentRoadmapId}/projects`}
+        className={
+          '-ml-1.5 flex items-center rounded-md bg-gray-300 px-2 py-1.5 text-xs tracking-wide text-black hover:bg-gray-400/60'
+        }
+      >
+        <ArrowLeft className="mr-1 inline-block h-3.5 w-3.5" strokeWidth={2} />
+        <span className="hidden sm:inline">Back to Projects</span>
+      </a>
       <TabButton
         text={'Project Detail'}
         icon={Text}
diff --git a/src/pages/projects/[projectId]/index.astro b/src/pages/projects/[projectId]/index.astro
index 742aa29f1..7a712a729 100644
--- a/src/pages/projects/[projectId]/index.astro
+++ b/src/pages/projects/[projectId]/index.astro
@@ -33,6 +33,8 @@ let jsonLdSchema: any[] = [];
 
 const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png';
 const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/projects/${projectId}.md`;
+
+const parentRoadmapId = projectData?.roadmapIds?.[0] || '';
 ---
 
 <BaseLayout
@@ -47,23 +49,29 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
 >
   <div class='bg-gray-50'>
     <div class='container'>
-      <ProjectTabs projectId={projectId} activeTab='details' />
+      <ProjectTabs parentRoadmapId={parentRoadmapId} projectId={projectId} activeTab='details' />
 
-      <div class='mb-4 rounded-lg border bg-gradient-to-b from-gray-100 to-white to-10% py-2 p-4 sm:p-5'>
+      <div
+        class='mb-4 rounded-lg border bg-gradient-to-b from-gray-100 to-white to-10% p-4 py-2 sm:p-5'
+      >
         <div class='relative'>
-          <div class='mb-4 hidden sm:flex items-center justify-between'>
+          <div class='mb-4 hidden items-center justify-between sm:flex'>
             <div class='flex flex-row flex-wrap gap-1.5'>
               {
                 projectData.skills.map((skill) => (
-                    <Badge variant='green' text={skill} />
+                  <Badge variant='green' text={skill} />
                 ))
               }
             </div>
             <Badge variant='yellow' text={projectData.difficulty} />
           </div>
-          <div class="my-2 sm:my-7">
-            <h1 class='mb-1 sm:mb-2 text-xl sm:text-3xl font-semibold'>{projectData.title}</h1>
-            <p class='text-balance text-sm text-gray-500'>{projectData.description}</p>
+          <div class='my-2 sm:my-7'>
+            <h1 class='mb-1 text-xl font-semibold sm:mb-2 sm:text-3xl'>
+              {projectData.title}
+            </h1>
+            <p class='text-balance text-sm text-gray-500'>
+              {projectData.description}
+            </p>
           </div>
         </div>
 
diff --git a/src/pages/projects/[projectId]/solutions.astro b/src/pages/projects/[projectId]/solutions.astro
index c345bb348..35235bdc5 100644
--- a/src/pages/projects/[projectId]/solutions.astro
+++ b/src/pages/projects/[projectId]/solutions.astro
@@ -31,6 +31,8 @@ const projectData = project.frontmatter as ProjectFrontmatter;
 
 let jsonLdSchema: any[] = [];
 
+const parentRoadmapId = projectData?.roadmapIds?.[0] || '';
+
 const ogImageUrl = projectData?.seo?.ogImageUrl || '/images/og-img.png';
 const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/projects/${projectId}.md`;
 ---
@@ -47,7 +49,7 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
 >
   <div class='bg-gray-50'>
     <div class='container'>
-      <ProjectTabs projectId={projectId} activeTab='solutions' />
+      <ProjectTabs parentRoadmapId={parentRoadmapId} projectId={projectId} activeTab='solutions' />
 
       <ListProjectSolutions
         project={projectData}