added bucket select

src/App.tsx

@@ -5,6 +5,7 @@ import NotFound from "./components/NotFound"
 import Login from "./components/Login"
 import { useIsAuthQuery } from "./generated/graphql"
 import { useEffect } from "react"
+import BucketSelect from "./components/BucketSelect"
 
 const App: React.FC = () => {
 	const { data } = useIsAuthQuery()
@@ -27,6 +28,7 @@ const App: React.FC = () => {
 						{/* Private only routes */}
 						{
 							isAuth && [
+								<Route path="/f/" exact component={BucketSelect} key={null} />,
 								<Route path="/f/" component={FileBrowser} key={null} />,
 								<Redirect from="/" exact to="/f/" key={null} />,
 								<Redirect from="/login" exact to="/f/" key={null} />,

src/components/BucketSelect.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { useState } from "react"
+import { Link } from "react-router-dom"
+import Breadcrum from "./Breadcrum"
+import MoreMenu from "./MoreMenu"
+
+const BucketSelect: React.FC = () => {
+
+	const [buckets] = useState(["dev"])
+
+	return (
+		<div>
+			<div className="flex justify-between h-12">
+				<Breadcrum />
+				<div className="ml-auto">
+					<MoreMenu />
+				</div>
+			</div>
+			<ul>
+				{buckets.map((e)=>
+					<li key={e}>
+						<Link to={`/f/${e}/`} >{e}</Link>
+					</li>
+				)}
+			</ul>
+		</div>
+	)
+}
+
+export default BucketSelect

src/components/FileBrowser.tsx

@@ -107,7 +107,7 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 					await handleDrop(files)
 				}}
 			>
-				<div className="flex justify-between">
+				<div className="flex justify-between h-12">
 					<Breadcrum path={path} onDirClick={(newPath)=>{
 						props.history.push(newPath.toURI())
 					}}/>