asb_cloud_front/src/components/MenuBreadcrumb.tsx

import { Breadcrumb, BreadcrumbItemProps } from 'antd'
import { Link, useLocation } from 'react-router-dom'
import { memo, useMemo } from 'react'
import { join } from 'path'

import { PrivateWellMenuItem } from '@components/PrivateWellMenu'
import { FunctionalValue, useFunctionalValue } from '@utils'

export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: string[], root: string = '/') => {
    const out = []
    const parts = [...pathParts]
    let route = root
    let arr: PrivateWellMenuItem[] | undefined = items
    while (arr && parts.length > 0) {
        const child: PrivateWellMenuItem | undefined = arr.find(elm => elm.route.toLowerCase() === parts[0].toLowerCase())
        if (!child) break
        route = join(route, child.route)
        out.push({ ...child, route })
        parts.splice(0, 1)
        arr = child.children
    }
    return out
}

export type MenuBreadcrumbItemsProps = {
    menuItems: PrivateWellMenuItem[]
    pathRoot?: RegExp
    itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>
    itemRender?: (item: PrivateWellMenuItem) => JSX.Element
}

export const MenuBreadcrumbItems = memo<MenuBreadcrumbItemsProps>(({ menuItems, pathRoot = /^\//, itemsProps, itemRender }) => {
    const location = useLocation()
    const getItemProps = useFunctionalValue(itemsProps)

    const items = useMemo(() => {
        const path = location.pathname
        const rootPart = pathRoot.exec(path)
        if (!rootPart || rootPart.length <= 0) return []
        const root = rootPart[0]
        const parts = path.trim().slice(root.length).split('/')
        return makeBreadcrumbItems(menuItems, parts, root)
    }, [location, menuItems, pathRoot])

    return (
        <>
            {items.map((item) => (
                <Breadcrumb.Item key={item.route} {...getItemProps(item)}>
                    {itemRender ? itemRender(item) : (
                        <Link to={item.route}>{item.title}</Link>
                    )}
                </Breadcrumb.Item>
            ))}
        </>
    )
})