e8b7d3b9fc
* start SidebarNav, enable dark mode * wip: sidebarnav, fix primer components theme rendering * feat: ProductSiteTree, useFeatureFlag * feat: add new product site tree (untested) * wire up HomepageVersionPicker, run lint * fix: remove re-render logic, fix homepage version picker to be natural width * fix: support css + primer/components color modes * fix: rename categoryId -> productId * feat: ProductSiteTree and AllArticlesProduct * fix: cleanup warnings * fix: use next links on ProductSiteTreeNew * fix: use next Link on AllArticlesProduct * fix: add tooltip to ScrollButton, remove stylesheet dependency * feat: ProductArticlesList component * fix: convert color_mode value from cookie when necessary * remove comments * replace liquid with jsx Co-authored-by: Rachael Sewell <rachmari@github.com>
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import cx from 'classnames'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import { useMainContext } from './context/MainContext'
|
|
|
|
export type BreadcrumbT = {
|
|
title: string
|
|
documentType?: string
|
|
href?: string
|
|
}
|
|
|
|
type Props = {}
|
|
export const Breadcrumbs = (props: Props) => {
|
|
const router = useRouter()
|
|
const pathWithLocale = `/${router.locale}${router.asPath}`
|
|
const { breadcrumbs } = useMainContext()
|
|
|
|
return (
|
|
<nav className="breadcrumbs f5" aria-label="Breadcrumb">
|
|
{Object.values(breadcrumbs).map((breadcrumb) => {
|
|
if (!breadcrumb) {
|
|
return null
|
|
}
|
|
|
|
const title = `${breadcrumb.documentType}: ${breadcrumb.title}`
|
|
return !breadcrumb.href ? (
|
|
<span key={title} title={title}>
|
|
{breadcrumb.title}
|
|
</span>
|
|
) : (
|
|
<Link key={title} href={breadcrumb.href}>
|
|
<a
|
|
title={title}
|
|
className={cx(
|
|
'd-inline-block',
|
|
pathWithLocale === breadcrumb.href && 'color-text-tertiary'
|
|
)}
|
|
>
|
|
{breadcrumb.title}
|
|
</a>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
)
|
|
}
|