improved breadcrum

src/components/Breadcrum.tsx

@@ -1,45 +1,55 @@
 import React from "react"
 import ObjID from "../types/ObjID"
 import  { ReactComponent as BreadcrumImage } from "./../assets/breadcrum.svg"
+import { Link } from "react-router-dom"
 
 interface Props{
-    path: ObjID
+    path?: ObjID
     onDirClick?: (path: ObjID) => void
 }
 
-const Breadcrum: React.FC<Props> = (props) => {
+const Breadcrum: React.FC<Props> = ({path,onDirClick}) => {
-	const keyParts = props.path.key.split("/").filter(e=>e.length > 0)
+
+	if (!path){
+		return <ul className="flex text-gray-500 dark:text-gray-400  text-lg ">
+			<div className="breadcrum-item text-blue-500">
+				<Link to="/f/">
+					Home
+				</Link>
+			</div>
+		</ul>
+	}
+
+	const keyParts = path.key.split("/").filter(e=>e.length > 0)
 
 	return (
 		<ul className="flex text-gray-500 dark:text-gray-400  text-lg ">
-			<div className="inline-flex items-center cursor-pointer">
+			<div className="breadcrum-item">
-				<li>
+				<Link to="/f/">
-					<a>
+					Home
-						{props.path.bucket}
+				</Link>
-					</a>
-				</li>
 			</div>
-			<div className="inline-flex items-center cursor-pointer">
+			<div className="breadcrum-item">
 				<BreadcrumImage className="h-5 w-auto text-gray-400" />
 				<li>
-					<a onClick={()=>{
+					<a className={!keyParts.length?"text-blue-500":""} onClick={()=>{
-						props.onDirClick?.(new ObjID(props.path.bucket,"/"))
+						onDirClick?.(new ObjID(path.bucket,"/"))
 					}}>
-						root
+						{path.bucket}
 					</a>
 				</li>
 			</div>
 
 			{keyParts.map((e,i,arr)=>{
 				const last = i == arr.length - 1
-				return <div key={e} className="inline-flex items-center cursor-pointer">
+				return <div key={e} className="breadcrum-item">
 					<BreadcrumImage className="h-5 w-auto text-gray-400" />
 					<li>
 						<a 
 							className={`${last?"text-blue-500":""}`}
 							onClick={()=>{
 								if (!last){
-									props.onDirClick?.(new ObjID(props.path.bucket,"/"+arr.slice(0,i-1).join("/")))
+									onDirClick?.(new ObjID(path.bucket,"/"+arr.slice(0,i-1).join("/")))
 								}
 							}}>{e}</a>
 					</li>

src/index.scss

@@ -7,3 +7,7 @@
 .text-input{
     @apply bg-transparent border-gray-900 dark:border-gray-300 dark:text-gray-300 outline-none border-b
 }
+
+.breadcrum-item{
+    @apply inline-flex items-center cursor-pointer
+}