37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
import { ParsedUrlQuery } from 'querystring'
|
|
import { FunctionComponent } from 'react'
|
|
|
|
const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) => {
|
|
if (query) {
|
|
const { path } = query
|
|
if (Array.isArray(path)) {
|
|
return (
|
|
<div className="pb-4 text-sm text-gray-600 flex flex-wrap">
|
|
<div className="p-1 hover:text-black transition-all duration-75">
|
|
<Link href="/">🚩 Home</Link>
|
|
</div>
|
|
{path.map((q: string, i: number) => (
|
|
<div key={i} className="flex items-center">
|
|
<div>/</div>
|
|
<div className="p-1 hover:text-black transition-all duration-75">
|
|
<Link href={`/${path.slice(0, i + 1).join('/')}`}>{q}</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="pb-4 text-sm text-gray-600 hover:text-black transition-all duration-75">
|
|
<div className="p-1">
|
|
<Link href="/">🚩 Home</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Breadcrumb
|