70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
import {usePathname} from 'next/navigation'
|
|
|
|
|
|
const pathToBreadCrumbs = (path: string) => {
|
|
const mapping: Record<string, string> = {
|
|
'/' : 'Kezdőlap',
|
|
'about' : 'Rólam',
|
|
'services' : 'Szolgáltatásaim',
|
|
'prices' : 'Áraim',
|
|
'faq' : 'GYIK',
|
|
}
|
|
if ( mapping.hasOwnProperty(path)){
|
|
return mapping[path];
|
|
}
|
|
return path;
|
|
}
|
|
|
|
const NextBreadcrumb = () => {
|
|
|
|
const paths = usePathname()
|
|
const pathNames = paths.split('/').filter( path => path )
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div className="btn_wrapper">
|
|
<span className="sub_home_span">{pathToBreadCrumbs( "/" )} </span>
|
|
{
|
|
pathNames.map((value) => {
|
|
|
|
return (
|
|
<React.Fragment key={value}>
|
|
<i className="fa-solid fa-angles-right" aria-hidden="true"></i>
|
|
<span className="sub_span">{pathToBreadCrumbs( value )}</span>
|
|
</React.Fragment>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
// <div>
|
|
// <ul className={containerClasses}>
|
|
// <li className={listClasses}><Link href={'/'}>{homeElement}</Link></li>
|
|
// {pathNames.length > 0 && separator}
|
|
// {
|
|
// pathNames.map( (link, index) => {
|
|
// let href = `/${pathNames.slice(0, index + 1).join('/')}`
|
|
// let itemClasses = paths === href ? `${listClasses} ${activeClasses}` : listClasses
|
|
// let itemLink = capitalizeLinks ? link[0].toUpperCase() + link.slice(1, link.length) : link
|
|
// return (
|
|
// <React.Fragment key={index}>
|
|
// <li className={itemClasses} >
|
|
// <Link href={href}>{itemLink}</Link>
|
|
// </li>
|
|
// {pathNames.length !== index + 1 && separator}
|
|
// </React.Fragment>
|
|
// )
|
|
// })
|
|
// }
|
|
// </ul>
|
|
// </div>
|
|
)
|
|
}
|
|
|
|
export default NextBreadcrumb
|