50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client"
|
|
import { Fragment } from "react"
|
|
import { usePathname } from "next/navigation"
|
|
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
|
|
import styles from "./breadcrumbs.module.css"
|
|
|
|
import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
|
|
|
|
export default function ClientBreadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
|
|
const pathname = usePathname()
|
|
/** Temp solution until we can get breadcrumbs from CS */
|
|
const path = pathname.replace(`/${lang}`, '')
|
|
const currentBreadcrumbs = breadcrumbs?.[path]
|
|
if (!currentBreadcrumbs?.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<li className={styles.listItem}>
|
|
<span>/</span>
|
|
</li>
|
|
{currentBreadcrumbs.map(breadcrumb => {
|
|
if (breadcrumb.href) {
|
|
return (
|
|
<Fragment key={breadcrumb.title}>
|
|
<li className={styles.listItem}>
|
|
<Link className={styles.link} href={breadcrumb.href}>
|
|
{breadcrumb.title}
|
|
</Link>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<span>/</span>
|
|
</li>
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<li className={styles.listItem} key={breadcrumb.title}>
|
|
<p className={styles.currentPage}>{breadcrumb.title}</p>
|
|
</li>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|