Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 3x 3x 3x 3x 21x 6x | import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '../lib/loadIcons'
export interface BreadcrumbItem {
text: string
link: string
}
export interface BreadcrumbProps {
id?: string
items?: BreadcrumbItem[]
refPageAA: string
}
const Breadcrumb = ({
id, // TODO: Provide a default value once this is actually mapped in
items,
refPageAA = 'mscaPlaceholder',
}: BreadcrumbProps) => {
return (
<nav className="py-6" aria-label="Breadcrumb-Fil d’ariane" id={id}>
<ul className="block font-body text-base leading-[23px] text-deep-blue-dark">
{items
? items.map((item, key) => {
return (
<li key={key} className="w-100 inline-block pb-4 sm:pb-0">
{key !== 0 && (
<span className="mx-2 inline-block px-2">
<FontAwesomeIcon
icon={icon['chevron-right']}
className="text-sm"
/>
</span>
)}
<Link
data-cy={'breadcrumb-' + item.text}
href={item.link}
className="font-body underline hover:text-blue-hover focus:text-blue-hover"
data-gc-analytics-customclick={`${refPageAA}:${item.text}`}
>
{item.text}
</Link>
</li>
)
})
: null}
</ul>
</nav>
)
}
export default Breadcrumb
|