43 lines
948 B
TypeScript
43 lines
948 B
TypeScript
import React from "react"
|
|
import { ReactComponent as BreadcrumImage } from "./../assets/breadcrum.svg"
|
|
|
|
interface Props{
|
|
path: string
|
|
onDirClick?: (path: string) => void
|
|
}
|
|
|
|
const Breadcrum: React.FC<Props> = (props) => {
|
|
const parts = props.path.split("/").filter(e=>e.length > 0)
|
|
|
|
return (
|
|
<ul className="flex text-gray-500 dark:text-gray-400 text-lg">
|
|
<li className="inline-flex items-center cursor-pointer">
|
|
<a onClick={()=>{
|
|
props.onDirClick?.("/")
|
|
}}>
|
|
Root
|
|
</a>
|
|
</li>
|
|
|
|
{parts.map((e,i,arr)=>{
|
|
const last = i == arr.length - 1
|
|
return <div key={e} className="inline-flex items-center cursor-pointer">
|
|
<BreadcrumImage />
|
|
<li>
|
|
<a
|
|
className={`${last?"text-blue-500":""}`}
|
|
onClick={()=>{
|
|
if (!last){
|
|
props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
|
|
}
|
|
}}>{e}</a>
|
|
</li>
|
|
</div>
|
|
})}
|
|
</ul>
|
|
|
|
)
|
|
}
|
|
|
|
export default Breadcrum
|