This repository has no description
Something went wrong. Try again.
2.5 kB · 75 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576import Link from 'next/link'import clsx from 'clsx'import { BreadcrumbSchema } from './schema/Breadcrumb'
interface BreadcrumbItem { name: string url: string}
interface BreadcrumbsProps { items: BreadcrumbItem[] className?: string hideCurrentOnMobile?: boolean}
export function Breadcrumbs({ items, className, hideCurrentOnMobile = false }: BreadcrumbsProps) { const origin = (process.env.NEXT_PUBLIC_SITE_URL ?? 'https://arter.dev').replace(/\/$/, '')
const absoluteItems = items.map((item) => ({ name: item.name, url: item.url.startsWith('http') ? item.url : `${origin}${item.url}`, }))
const lastIndex = items.length - 1
return ( <> <BreadcrumbSchema items={absoluteItems} /> <nav aria-label="Breadcrumb" className={clsx('not-prose', className)}> <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0 font-mono text-[11px] tracking-widest uppercase"> {items.map((item, i) => { const isLast = i === lastIndex const hideOnMobile = isLast && hideCurrentOnMobile && items.length > 1 return ( <li key={item.url} className={clsx( 'min-w-0 items-center gap-2', hideOnMobile ? 'hidden md:flex' : 'flex', )} > {i > 0 && ( <span aria-hidden="true" className="text-ink-4 select-none"> / </span> )} {isLast ? ( <span aria-current="page" className="text-ink inline-flex max-w-[36ch] items-baseline gap-1.5 truncate" > <span aria-hidden="true" className="text-ink-4 font-normal"> [ </span> <span className="truncate">{item.name}</span> <span aria-hidden="true" className="text-ink-4 font-normal"> ] </span> </span> ) : ( <Link href={item.url} className="text-ink-3 hover:text-ink focus-visible:text-ink no-underline transition-colors focus-visible:outline-none" > {item.name} </Link> )} </li> ) })} </ol> </nav> </> )}