improved breadcrum

src/assets/breadcrum.svg

@@ -0,0 +1,11 @@
+<svg
+    class="h-5 w-auto text-gray-400"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+>
+    <path
+        fillRule="evenodd"
+        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        clipRule="evenodd"
+    ></path>
+</svg>

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
 				</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){
+			{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></>))}
+					</li>
+				</>)
+			})}
 		</ul>
+
 	)
 }