💄 feat(layout-page): render breadcrumbs

ythecombinator · Dec 3, 2023 · 6decc5e · 6decc5e
1 parent 8c1c8ae
commit 6decc5e
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/components/layouts/layout-page.tsx b/src/components/layouts/layout-page.tsx
@@ -1,6 +1,9 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 
 import PageTitle, { PageTitleProps } from 'components/shared/page-title';
+import { usePathname } from 'next/navigation';
+import { toBreadcrumbs } from 'utils/string';
+import Breadcrumbs from 'components/shared/breadcrumbs';
 
 /*~
  * TYPES
@@ -22,8 +25,12 @@ const PageLayout: FunctionComponent<PropsWithChildren<PageLayoutProps>> = ({
   headingGradient,
   children,
 }) => {
+  const pathname = usePathname();
+  const breadcrumbs = toBreadcrumbs(pathname);
+
   return (
     <div className="mt-6 px-2 sm:px-0">
+      {breadcrumbs.length > 1 && <Breadcrumbs items={breadcrumbs} />}
       <div className="space-y-2 pt-6 pb-8 md:space-y-5">
         <PageTitle gradient={headingGradient}>{heading}</PageTitle>
         {subHeading}