1 import React from 'react'
2 import {Breadcrumbs as PrimerBreadcrumbs} from '@primer/react'
3 import {Link as GatsbyLink} from 'gatsby'
4 import * as getNav from '../util/get-nav'
5 import usePage from '../hooks/use-page'
6
7 const BreadcrumbItem = ({item, path}) => {
8 const selected = getNav.isPathForItem(path, getNav.getItem(item.url))
9
10 return (
11 <PrimerBreadcrumbs.Item as={GatsbyLink} to={item.url} {...(selected ? {selected} : {})}>
12 {item.shortName || item.title}
13 </PrimerBreadcrumbs.Item>
14 )
15 }
16
17 const Breadcrumbs = () => {
18 const {pathname} = usePage().location
19 const items = getNav.getItemBreadcrumbs(pathname, {hideVariants: true})
20
21 if (items.length <= 1) {
22 return null
23 }
24
25 return (
26 <PrimerBreadcrumbs sx={{mb: 4}}>
27 {items.map(item => (
28 <BreadcrumbItem key={item.url} item={item} path={pathname} />
29 ))}
30 </PrimerBreadcrumbs>
31 )
32 }
33
34 export default Breadcrumbs