Merge pull request #35 from ETLOnline/feature-breadcrumbs

breadcrumbs

src/components/dashboard/header.tsx

@@ -1,40 +1,72 @@
-import React from 'react'
-import { SidebarTrigger } from '../ui/sidebar'
-import { Separator } from '@radix-ui/react-separator'
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../ui/breadcrumb'
-import { ModeToggle } from '../ThemeProvider/ThemeToggle'
+"use client"
 
-const Header = () => {
-  return (
-    <header className="flex h-16 shrink-0 items-center gap-2">
-    <div className='flex items-center between justify-between w-full gap-2 px-4'>
+import { SidebarTrigger } from "../ui/sidebar"
+import { Separator } from "@radix-ui/react-separator"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "../ui/breadcrumb"
+import { ModeToggle } from "../ThemeProvider/ThemeToggle"
+import { usePathname } from "next/navigation"
+import { pageMeta, PageMeta } from "@/src/utils/constants"
 
-      <div className="flex items-center ">
-        <SidebarTrigger className="-ml-1" />
-        <Separator orientation="vertical" className="mr-2 h-4" />
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem className="hidden md:block">
-              <BreadcrumbLink href="#">
-                Building Your Application
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator className="hidden md:block" />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+const Header = () => {
+  type Crumb = {
+    href: string
+    path: string
+  }
 
+  const path: string = usePathname().substring(1)
+  const hrefs: string[] = path
+    .split("/")
+    .map(
+      (pathName, i) =>
+        "/" + path.substring(0, path.indexOf(pathName) + pathName.length)
+    )
+  const crumbs: Crumb[] = (() => {
+    const tempCrumbs: Crumb[] = []
+    hrefs.forEach((href) => {
+      const meta = pageMeta.find((meta: PageMeta) => meta.url === href)
+      if (meta) {
+        tempCrumbs.push({ href, path: meta.title })
+      }
+    })
+    return [...tempCrumbs]
+  })()
 
+  return (
+    <header className="flex h-16 shrink-0 items-center gap-2">
+      <div className="flex items-center between justify-between w-full gap-2 px-4">
+        <div className="flex items-center ">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink href={"/"}>
+                  <BreadcrumbPage>Spark</BreadcrumbPage>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              {crumbs.map((crumb, i) => (
+                <BreadcrumbItem key={crumb.href}>
+                  <BreadcrumbLink href={crumb.href}>
+                    <BreadcrumbPage>{crumb.path}</BreadcrumbPage>
+                  </BreadcrumbLink>
+                  {i !== crumbs.length - 1 && <BreadcrumbSeparator />}
+                </BreadcrumbItem>
+              ))}
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+        <ModeToggle />
       </div>
-
-      <ModeToggle />
-
-
-    </div>
-  </header>
+    </header>
   )
 }
 
-export default Header
+export default Header

src/utils/constants.ts

@@ -0,0 +1,82 @@
+export const pageMeta = [
+  {
+    id: "home",
+    url: "/",
+    title: "Home",
+    description: "home/landing page"
+  },
+  {
+    id: "profile",
+    url: "/profile",
+    title: "Profile",
+    description: "user profiule containing bio, rewards, activity and schedule"
+  },
+  {
+    id: "events",
+    url: "/events",
+    title: "Events",
+    description: "events"
+  },
+  {
+    id: "chat",
+    url: "/chat",
+    title: "Chat",
+    description: "chat feed"
+  },
+  {
+    id: "posts",
+    url: "/posts",
+    title: "Posts",
+    description: "post feed"
+  },
+  {
+    id: "project-incubator",
+    url: "/project-incubator",
+    title: "Project Incubator",
+    description: "project incubator"
+  },
+  {
+    id: "spaces",
+    url: "/spaces",
+    title: "Spaces",
+    description: "spaces"
+  },
+  {
+    id: "settings",
+    url: "/settings",
+    title: "Settings",
+    description: "user settings"
+  },
+  {
+    id: "general settings",
+    url: "/settings/general",
+    title: "General",
+    description: "general settings"
+  },
+  {
+    id: "team settings",
+    url: "/settings/team",
+    title: "Team",
+    description: "team settings"
+  },
+  {
+    id: "billing settings",
+    url: "/settings/billing",
+    title: "Billing",
+    description: "billing settings"
+  },
+  {
+    id: "limit settings",
+    url: "/settings/limit",
+    title: "Limit",
+    description: "limit settings"
+  },
+  {
+    id: "projects",
+    url: "/projects",
+    title: "Projects",
+    description: "projects"
+  }
+]
+
+export type PageMeta = typeof pageMeta[0]