asb_cloud_front/src/components/MenuBreadcrumb.tsx

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

import { PrivateMenuItem } from '@components/PrivateMenu'
import { FunctionalValue, getFunctionalValue, } from '@utils'

export const makeBreadcrumbItems = (items: PrivateMenuItem[], pathParts: string[], root: string = '/') => {
    const out = []
    const parts = [...pathParts]
    let route = root
    let arr: PrivateMenuItem[] | undefined = items
    while (arr && parts.length > 0) {
        const child: PrivateMenuItem | 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 const makeMenuBreadcrumbItems = (
    menuItems: PrivateMenuItem[],
    path: string,
    pathRoot: RegExp = /^\//,
    itemsProps?: FunctionalValue<(item: PrivateMenuItem) => BreadcrumbItemProps>,
    itemRender?: (item: PrivateMenuItem) => JSX.Element,
) => {
    const getItemProps = getFunctionalValue(itemsProps)

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

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