Feat/add product breadcrumb

src/app/[channel]/(main)/products/[slug]/page.tsx

@@ -13,6 +13,7 @@ import { formatMoney, formatMoneyRange } from "@/lib/utils";
 import { CheckoutAddLineDocument, ProductDetailsDocument, ProductListDocument } from "@/gql/graphql";
 import * as Checkout from "@/lib/checkout";
 import { AvailabilityMessage } from "@/ui/components/AvailabilityMessage";
+import { Breadcrumb } from "@/ui/components/nav/components/BreadCrumb";
 
 export async function generateMetadata(
 	props: {
@@ -176,6 +177,14 @@ export default async function Page(props: {
 					__html: JSON.stringify(productJsonLd),
 				}}
 			/>
+			<div>
+				<Breadcrumb
+					channel={params.channel}
+					categoryName={product.category?.name ?? ""}
+					categorySlug={product.category?.name}
+					productName={product.name}
+				/>
+			</div>
 			<form className="grid gap-2 sm:grid-cols-2 lg:grid-cols-8" action={addItem}>
 				<div className="md:col-span-1 lg:col-span-5">
 					{firstImage && (

src/graphql/ProductDetails.graphql

@@ -13,6 +13,7 @@ query ProductDetails($slug: String!, $channel: String!) {
 		category {
 			id
 			name
+			slug
 		}
 		variants {
 			...VariantDetails

src/ui/components/nav/components/BreadCrumb.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Link from "next/link";
+
+interface BreadcrumbProps {
+	channel: string;
+	categoryName: string;
+	categorySlug?: string;
+	productName: string;
+}
+
+export function Breadcrumb({ channel, categoryName, categorySlug, productName }: BreadcrumbProps) {
+	return (
+		<nav className="mb-4 text-sm text-neutral-500" aria-label="Breadcrumb">
+			<ol className="flex flex-wrap items-center gap-1">
+				<li className="flex items-center">
+					<Link
+						href={`/${channel}`}
+						className="transition-colors duration-200 hover:text-neutral-900 hover:underline"
+					>
+						Home
+					</Link>
+					<span className="mx-1">/</span>
+				</li>
+
+				{categoryName && (
+					<li className="flex items-center">
+						{categorySlug ? (
+							<Link
+								href={`/${channel}/categories/${categorySlug}`}
+								className="transition-colors duration-200 hover:text-neutral-900 hover:underline"
+							>
+								{categoryName}
+							</Link>
+						) : (
+							<span className="text-neutral-700">{categoryName}</span>
+						)}
+						<span className="mx-1">/</span>
+					</li>
+				)}
+
+				<li className="max-w-xs truncate font-medium text-neutral-900" title={productName}>
+					{productName}
+				</li>
+			</ol>
+		</nav>
+	);
+}