feat(app): add pagewrapper component with breadcrumbs

apps/app/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { Separator, SidebarInset, SidebarTrigger } from '@boring.tools/ui'
+import { SidebarInset } from '@boring.tools/ui'
 import type { ReactNode } from 'react'
 import { Sidebar } from './Sidebar'
 
@@ -8,37 +8,8 @@ export const description =
 export const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
   return (
     <>
-      {/* <Navigation /> */}
       <Sidebar />
-      <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2">
-          <div className="flex items-center gap-2 px-4">
-            <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> */}
-          </div>
-        </header>
-        <Separator />
-        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-          <div className="flex flex-col">
-            <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-              {children}
-            </main>
-          </div>
-        </div>
-      </SidebarInset>
+      <SidebarInset>{children}</SidebarInset>
     </>
   )
 }

apps/app/src/components/PageWrapper.tsx

@@ -0,0 +1,63 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Separator,
+  SidebarTrigger,
+} from '@boring.tools/ui'
+import { Link } from '@tanstack/react-router'
+
+type Breadcrumbs = {
+  name: string
+  to: string
+}
+
+export const PageWrapper = ({
+  children,
+  breadcrumbs,
+}: { children: React.ReactNode; breadcrumbs?: Breadcrumbs[] }) => {
+  return (
+    <>
+      <header className="flex h-16 shrink-0 items-center gap-2">
+        <div className="flex items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          {/* <Separator orientation="vertical" className="mr-2 h-4" /> */}
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              {breadcrumbs?.map((crumb, key) => {
+                if (breadcrumbs.length - 1 === key) {
+                  return (
+                    <BreadcrumbItem key={crumb.to}>
+                      <BreadcrumbPage>{crumb.name}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  )
+                }
+
+                return (
+                  <div className="flex items-center gap-2" key={crumb.to}>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink asChild>
+                        <Link to={crumb.to}>{crumb.name}</Link>
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                  </div>
+                )
+              })}
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <Separator />
+      <div className="flex flex-col">
+        <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+          {children}
+        </main>
+      </div>
+    </>
+  )
+}

apps/app/src/routes/changelog.$id.lazy.tsx

@@ -7,6 +7,7 @@ import {
 import { Link, Outlet, createLazyFileRoute } from '@tanstack/react-router'
 import { FileStackIcon, PencilIcon } from 'lucide-react'
 import { ChangelogDelete } from '../components/Changelog/Delete'
+import { PageWrapper } from '../components/PageWrapper'
 import { useChangelogById } from '../hooks/useChangelog'
 
 const Component = () => {
@@ -25,6 +26,15 @@ const Component = () => {
   }
 
   return (
+    <PageWrapper
+      breadcrumbs={[
+        {
+          name: 'Changelog',
+          to: '/changelog',
+        },
+        { name: data?.title ?? '', to: `/changelog/${data?.id}` },
+      ]}
+    >
       <div className="flex flex-col gap-5">
         {!isPending && data && (
           <div>
@@ -37,7 +47,9 @@ const Component = () => {
                 <div>
                   <h1 className="text-3xl">{data.title}</h1>
 
-                <p className="text-muted-foreground mt-2">{data.description}</p>
+                  <p className="text-muted-foreground mt-2">
+                    {data.description}
+                  </p>
                 </div>
               </div>
 
@@ -86,6 +98,7 @@ const Component = () => {
           </div>
         )}
       </div>
+    </PageWrapper>
   )
 }
 

apps/app/src/routes/changelog.create.lazy.tsx

@@ -17,6 +17,7 @@ import { createLazyFileRoute } from '@tanstack/react-router'
 import { useNavigate } from '@tanstack/react-router'
 import { useForm } from 'react-hook-form'
 import type { z } from 'zod'
+import { PageWrapper } from '../components/PageWrapper'
 import { useChangelogCreate } from '../hooks/useChangelog'
 
 const Component = () => {
@@ -40,6 +41,15 @@ const Component = () => {
   }
 
   return (
+    <PageWrapper
+      breadcrumbs={[
+        {
+          name: 'Changelog',
+          to: '/changelog',
+        },
+        { name: 'New', to: '/changelog/create' },
+      ]}
+    >
       <div className="flex flex-col gap-5">
         <h1 className="text-3xl">New changelog</h1>
 
@@ -109,6 +119,7 @@ const Component = () => {
           </form>
         </Form>
       </div>
+    </PageWrapper>
   )
 }
 

apps/app/src/routes/changelog.index.lazy.tsx

@@ -7,6 +7,7 @@ import {
 } from '@boring.tools/ui'
 import { Link, createLazyFileRoute } from '@tanstack/react-router'
 import { PlusCircleIcon } from 'lucide-react'
+import { PageWrapper } from '../components/PageWrapper'
 import { useChangelogList } from '../hooks/useChangelog'
 
 const Component = () => {
@@ -24,8 +25,10 @@ const Component = () => {
   }
 
   return (
+    <PageWrapper breadcrumbs={[{ name: 'Changelog', to: '/changelog' }]}>
+      <>
         <div className="flex flex-col gap-5">
-      <h1 className="text-3xl">Changelogs</h1>
+          <h1 className="text-3xl">Changelog</h1>
 
           <div className="flex gap-10 w-full">
             {!isPending &&
@@ -63,6 +66,8 @@ const Component = () => {
             </Link>
           </div>
         </div>
+      </>
+    </PageWrapper>
   )
 }