add breadcrumbs

src/app/(dashboard)/dashboard/stores/[storeId]/products/loading.tsx

@@ -1,5 +1,11 @@
 import { DataTableLoading } from "@/components/data-table/data-table-loading"
 
 export default function ProductsLoading() {
-  return <DataTableLoading isNewRowCreatable={true} isRowsDeletable={true} />
+  return (
+    <DataTableLoading
+      columnCount={6}
+      isNewRowCreatable={true}
+      isRowsDeletable={true}
+    />
+  )
 }

src/app/(lobby)/product/[productId]/page.tsx

@@ -6,7 +6,7 @@ import { products, stores } from "@/db/schema"
 import { env } from "@/env.mjs"
 import { and, desc, eq, not } from "drizzle-orm"
 
-import { cn, formatPrice } from "@/lib/utils"
+import { formatPrice, toTitleCase } from "@/lib/utils"
 import {
   Accordion,
   AccordionContent,
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/accordion"
 import { Separator } from "@/components/ui/separator"
 import { AddToCartForm } from "@/components/forms/add-to-cart-form"
-import { Icons } from "@/components/icons"
+import { Breadcrumbs } from "@/components/pagers/breadcrumbs"
 import { ProductCard } from "@/components/product-card"
 import { ProductImageCarousel } from "@/components/product-image-carousel"
 import { Shell } from "@/components/shells/shell"
@@ -67,19 +67,22 @@ export default async function ProductPage({ params }: ProductPageProps) {
 
   return (
     <Shell>
-      <div className="flex items-center space-x-1 text-sm capitalize text-muted-foreground">
-        <div className="truncate">Products</div>
-        <Icons.chevronRight className="h-4 w-4" aria-hidden="true" />
-        <div className={cn(!product.subcategory && "text-foreground")}>
-          {product.category}
-        </div>
-        {product.subcategory ? (
-          <>
-            <Icons.chevronRight className="h-4 w-4" aria-hidden="true" />
-            <div className="text-foreground">{product.subcategory}</div>
-          </>
-        ) : null}
-      </div>
+      <Breadcrumbs
+        segments={[
+          {
+            title: "Products",
+            href: "/products",
+          },
+          {
+            title: toTitleCase(product.category),
+            href: `/products?category=${product.category}`,
+          },
+          {
+            title: product.name,
+            href: `/product/${product.id}`,
+          },
+        ]}
+      />
       <div className="flex flex-col gap-8 md:flex-row md:gap-16">
         <ProductImageCarousel
           className="w-full md:w-1/2"

src/components/data-table/data-table-loading.tsx

@@ -9,11 +9,15 @@ import {
 } from "@/components/ui/table"
 
 interface DataTableLoadingProps {
+  columnCount: number
+  rowCount?: number
   isNewRowCreatable?: boolean
   isRowsDeletable?: boolean
 }
 
 export function DataTableLoading({
+  columnCount,
+  rowCount = 10,
   isNewRowCreatable = false,
   isRowsDeletable = false,
 }: DataTableLoadingProps) {
@@ -38,7 +42,7 @@ export function DataTableLoading({
           <TableHeader>
             {Array.from({ length: 1 }).map((_, i) => (
               <TableRow key={i} className="hover:bg-transparent">
-                {Array.from({ length: 6 }).map((_, i) => (
+                {Array.from({ length: columnCount }).map((_, i) => (
                   <TableHead key={i}>
                     <Skeleton className="h-6 w-full" />
                   </TableHead>
@@ -47,9 +51,9 @@ export function DataTableLoading({
             ))}
           </TableHeader>
           <TableBody>
-            {Array.from({ length: 10 }).map((_, i) => (
+            {Array.from({ length: rowCount }).map((_, i) => (
               <TableRow key={i} className="hover:bg-transparent">
-                {Array.from({ length: 6 }).map((_, i) => (
+                {Array.from({ length: columnCount }).map((_, i) => (
                   <TableCell key={i}>
                     <Skeleton className="h-6 w-full" />
                   </TableCell>

src/components/pagers/breadcrumbs.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+
+interface BreadcrumbsProps {
+  segments: {
+    title: string
+    href: string
+  }[]
+  separator?: keyof typeof Icons
+}
+
+export function Breadcrumbs({ segments, separator }: BreadcrumbsProps) {
+  const SeparatorIcon = Icons[separator ?? "chevronRight"]
+
+  return (
+    <nav
+      aria-label="breadcrumbs"
+      className="flex items-center text-sm font-medium text-muted-foreground"
+    >
+      {segments.map((segment, index) => {
+        const isLastSegment = index === segments.length - 1
+
+        return (
+          <React.Fragment key={segment.href}>
+            <Link
+              aria-current={isLastSegment ? "page" : undefined}
+              href={segment.href}
+              className={cn(
+                "truncate transition-colors hover:text-muted-foreground",
+                isLastSegment
+                  ? "pointer-events-none text-muted-foreground"
+                  : "text-foreground"
+              )}
+            >
+              {segment.title}
+            </Link>
+            {!isLastSegment && (
+              <SeparatorIcon className="mx-2 h-4 w-4" aria-hidden="true" />
+            )}
+          </React.Fragment>
+        )
+      })}
+    </nav>
+  )
+}