Breadcrumb

Preview

Breadcrumb component takes in product, containing the breadcrumbs object.

Code

"use client"

import { CaretRight } from "@phosphor-icons/react"

const Breadcrumb = ({ product }: { product: any }) => (
	<nav className="flex flex-1">
		<ol className="flex items-center space-x-2 [&:not(:hover)>li]:opacity-100" role="list">
			{product.breadcrumbs.map((breadcrumb: any) => (
				<li className="[&:not(:hover)]:opacity-50" key={breadcrumb.id}>
					<div className="flex items-center">
						<a className="mr-2 font-medium text-gray-800" href={breadcrumb.href}>
							{breadcrumb.name}
						</a>
						<CaretRight size={18} />
					</div>
				</li>
			))}
			<li className="[&:not(:hover)]:opacity-50">
				<a className="font-medium text-gray-800" href={product.href}>
					{product.name}
				</a>
			</li>
		</ol>
	</nav>
)

export default Breadcrumb