info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-04-07 08:53:31 +02:00
Code Issues Releases Wiki Activity

Add back button on the projects navigation

Browse Source
This commit is contained in:
Kamran Ahmed 2024-08-26 17:06:39 +01:00
parent 1cbce6aeda
commit 6d58cb9a01
3 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Projects/ProjectTabs.tsx
View File

@ -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}

22
src/pages/projects/[projectId]/index.astro
View File

@ -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>

4
src/pages/projects/[projectId]/solutions.astro
View File

@ -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}