fixed breadcrum onDirClick

src/components/Breadcrum.tsx

@@ -49,7 +49,7 @@ const Breadcrum: React.FC<Props> = ({path,onDirClick}) => {
 							className={`${last?"text-blue-500":""}`}
 							onClick={()=>{
 								if (!last){
-									onDirClick?.(new ObjID(path.bucket,"/"+arr.slice(0,i-1).join("/")))
+									onDirClick?.(new ObjID(path.bucket,arr.slice(0,i+1).join("/")))
 								}
 							}}>{e}</a>
 					</li>

src/components/BucketSelect.tsx

@@ -1,13 +1,18 @@
 import React from "react"
-import { Link } from "react-router-dom"
+import { useHistory } from "react-router-dom"
 import { useListBucktesQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import MoreMenu from "./MoreMenu"
 import { ReactComponent as Spinner } from "./../assets/spinner.svg"
+import Table, { Data } from "./Table"
 
 const BucketSelect: React.FC = () => {
-
+	const history = useHistory()
 	const {data: buckets, loading} = useListBucktesQuery()
+	const tableData: Data = {
+		headers:[{name:"Bucket"}],
+		body:(!buckets?[]:buckets.buckets.map(e=>{return {cells:[{name:e||""}],onClick:()=>{history.push(`/f/${e}`)}}}))
+	}
 
 	return (
 		<div>
@@ -17,13 +22,7 @@ const BucketSelect: React.FC = () => {
 					<MoreMenu />
 				</div>
 			</div>
-			<ul>
+			<Table data={tableData}/>
-				{buckets?.buckets.map((e)=>
-					<li key={e}>
-						<Link to={`/f/${e}/`} >{e}</Link>
-					</li>
-				)}
-			</ul>
 			{loading && 
 				<div className="flex justify-center mt-4">
 					<Spinner className="animate-spin h-6 w-6 dark:text-white"  />

src/components/Table.tsx

@@ -32,7 +32,9 @@ const Table: React.FC<Props> = ({data:{headers,body}}) => {
 	return (
 		<table className="w-full">
 			<thead className="border-b-2 dark:border-gray-900">
+				<tr>
 					{headers.map((e,i)=><th key={i} className="text-left">{e.name}</th>)}
+				</tr>
 			</thead>
 			<tbody className="divide-y dark:divide-gray-900">
 				{body.map((row,rowIndex)=>