49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { mdiChevronRight, mdiHome } from '@mdi/js'
|
|
import Icon from '@mdi/react'
|
|
import { NavLink, Flex } from '@theme-ui/components'
|
|
import NextLink from 'next/link'
|
|
import React from 'react'
|
|
|
|
interface BreadcrumbItem {
|
|
href: string
|
|
label: string
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[]
|
|
}
|
|
|
|
const Breadcrumb = ({ items }: BreadcrumbProps) => {
|
|
return (
|
|
<Flex
|
|
mb={3}
|
|
sx={{
|
|
backgroundColor: 'gray.2',
|
|
paddingY: 2,
|
|
paddingX: 4,
|
|
borderRadius: 8,
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<NextLink passHref href='/'>
|
|
<NavLink sx={{ display: 'flex' }}>
|
|
<Icon size={0.8} path={mdiHome} />
|
|
</NavLink>
|
|
</NextLink>
|
|
{items.map((item) => {
|
|
return (
|
|
<React.Fragment key={item.href}>
|
|
<Icon size={0.8} path={mdiChevronRight} />
|
|
<NextLink passHref href={item.href}>
|
|
<NavLink>{item.label}</NavLink>
|
|
</NextLink>
|
|
</React.Fragment>
|
|
)
|
|
})}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default Breadcrumb
|