89 lines
2.4 KiB
JavaScript
89 lines
2.4 KiB
JavaScript
import React from 'react'
|
|
|
|
function Separator() {
|
|
return (
|
|
<svg
|
|
className="h-3 w-3 flex-shrink-0 text-white/15"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
aria-hidden="true"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function Crumb({ href, children, current = false }) {
|
|
const base = 'text-xs leading-none truncate max-w-[180px] sm:max-w-[260px]'
|
|
if (current) {
|
|
return (
|
|
<span
|
|
className={`${base} text-white/30`}
|
|
aria-current="page"
|
|
>
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|
|
return (
|
|
<a
|
|
href={href}
|
|
className={`${base} text-white/30 hover:text-white/60 transition-colors duration-150`}
|
|
>
|
|
{children}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export default function ArtworkBreadcrumbs({ artwork }) {
|
|
if (!artwork) return null
|
|
|
|
// Use the first category for the content-type + category crumbs
|
|
const firstCategory = artwork.categories?.[0] ?? null
|
|
const contentTypeSlug = firstCategory?.content_type_slug || null
|
|
const contentTypeName = contentTypeSlug
|
|
? contentTypeSlug.charAt(0).toUpperCase() + contentTypeSlug.slice(1)
|
|
: null
|
|
|
|
const categorySlug = firstCategory?.slug || null
|
|
const categoryName = firstCategory?.name || null
|
|
const categoryUrl = contentTypeSlug && categorySlug
|
|
? `/${contentTypeSlug}/${categorySlug}`
|
|
: null
|
|
|
|
return (
|
|
<nav aria-label="Breadcrumb" className="mt-1.5 mb-0">
|
|
<ol className="flex flex-wrap items-center gap-x-1 gap-y-1">
|
|
{/* Home */}
|
|
<li className="flex items-center gap-x-1.5">
|
|
<Crumb href="/">Home</Crumb>
|
|
</li>
|
|
|
|
{/* Content type e.g. Photography */}
|
|
{contentTypeSlug && (
|
|
<>
|
|
<li className="flex items-center"><Separator /></li>
|
|
<li className="flex items-center gap-x-1.5">
|
|
<Crumb href={`/${contentTypeSlug}`}>{contentTypeName}</Crumb>
|
|
</li>
|
|
</>
|
|
)}
|
|
|
|
{/* Category e.g. Landscapes */}
|
|
{categoryUrl && (
|
|
<>
|
|
<li className="flex items-center"><Separator /></li>
|
|
<li className="flex items-center gap-x-1.5">
|
|
<Crumb href={categoryUrl}>{categoryName}</Crumb>
|
|
</li>
|
|
</>
|
|
)}
|
|
|
|
{/* Current artwork title — omitted: shown as h1 above */}
|
|
</ol>
|
|
</nav>
|
|
)
|
|
}
|