improved breadcrum

src/components/Breadcrum.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
+import  { ReactComponent as BreadcrumImage } from "./../assets/breadcrum.svg"
 
 interface Props{
     path: string
@@ -10,25 +11,31 @@ const Breadcrum: React.FC<Props> = (props) => {
 	const parts = props.path.split("/").filter(e=>e.length > 0)
 
 	return (
-		<ul>
-			<li className="inline mr-1">
+		<ul className="flex text-gray-500 text-lg">
+			<li className="inline-flex items-center">
 				<a onClick={()=>{
 					props.onDirClick?.("/")
 				}}>
-                    Root
+					Root
 				</a>
 			</li>
-			{parts.map((e,i,arr)=>(
-				<>
-					<li className="inline mx-1">/</li>
-					<li key={e} className="inline mx-1">
-						<a onClick={()=>{
-							if (i != arr.length - 1){
-								props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
-							}
-						}}>{e}</a>
-					</li></>))}
+			{parts.map((e,i,arr)=>{
+				const last = i == arr.length - 1
+				return (<>
+					<BreadcrumImage />
+					<li key={e} className="inline-flex items-center">
+						<a 
+							className={last?"text-blue-500":""}
+							onClick={()=>{
+								if (!last){
+									props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
+								}
+							}}>{e}</a>
+					</li>
+				</>)
+			})}
 		</ul>
+
 	)
 }