added table to bucket select

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>
-				{buckets?.buckets.map((e)=>
-					<li key={e}>
-						<Link to={`/f/${e}/`} >{e}</Link>
-					</li>
-				)}
-			</ul>
+			<Table data={tableData}/>
 			{loading && 
 				<div className="flex justify-center mt-4">
 					<Spinner className="animate-spin h-6 w-6 dark:text-white"  />