feat: implement breadcrumb for PDP

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/product/[handle]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
+import BreadcrumbComponent from 'components/breadcrumb';
 import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
 import { Gallery } from 'components/product/gallery';
@@ -82,7 +83,8 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
+        <BreadcrumbComponent type="product" handle={product.handle} />
+        <div className="my-3 flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
           <div className="h-full w-full basis-full lg:basis-4/6">
             <Suspense
               fallback={

components/breadcrumb/breadcrumb-list.tsx

@@ -0,0 +1,96 @@
+import { ChevronRightIcon, EllipsisHorizontalIcon } from '@heroicons/react/16/solid';
+import { cn } from 'lib/utils';
+import Link, { LinkProps } from 'next/link';
+import { ComponentPropsWithoutRef, ReactNode, forwardRef } from 'react';
+
+const Breadcrumb = forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = forwardRef<HTMLOListElement, ComponentPropsWithoutRef<'ol'>>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = ({
+  className,
+  children,
+  ...props
+}: LinkProps & { className?: string; children: ReactNode }) => {
+  return (
+    <Link className={cn('hover:text-foreground transition-colors', className)} {...props}>
+      {children}
+    </Link>
+  );
+};
+
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon className="h-4 w-4" />}
+  </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <EllipsisHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};

components/breadcrumb/index.tsx

@@ -0,0 +1,62 @@
+import { getProduct } from 'lib/shopify';
+import { Fragment } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from './breadcrumb-list';
+
+type BreadcrumbProps = {
+  type: 'product' | 'collection';
+  handle: string;
+};
+
+const BreadcrumbComponent = async ({ type, handle }: BreadcrumbProps) => {
+  const items: Array<{ href: string; title: string }> = [{ href: '/', title: 'Home' }];
+
+  if (type === 'product') {
+    const product = await getProduct(handle);
+    if (!product) return null;
+    const collection = product?.collections.nodes.length ? product.collections.nodes[0] : null;
+
+    if (collection) {
+      items.push({
+        href: `/search/${collection.handle}`,
+        title: collection.title
+      });
+    }
+
+    items.push({
+      title: product.title,
+      href: `/product/${product.handle}`
+    });
+  }
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {items.slice(0, items.length).map((item, index) => (
+          <Fragment key={item.href}>
+            {index === items.length - 1 ? (
+              <BreadcrumbItem>
+                <BreadcrumbPage>{item.title}</BreadcrumbPage>
+              </BreadcrumbItem>
+            ) : (
+              <>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href={item.href}>{item.title}</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+              </>
+            )}
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+export default BreadcrumbComponent;

lib/shopify/fragments/product.ts

@@ -24,6 +24,12 @@ const productFragment = /* GraphQL */ `
         currencyCode
       }
     }
+    collections(first: 1) {
+      nodes {
+        title
+        handle
+      }
+    }
     variants(first: 250) {
       edges {
         node {

lib/shopify/types.ts

@@ -127,6 +127,12 @@ export type ShopifyProduct = {
   seo: SEO;
   tags: string[];
   updatedAt: string;
+  collections: {
+    nodes: {
+      title: string;
+      handle: string;
+    }[];
+  };
 };
 
 export type ShopifyCartOperation = {