added spectre css

package.json

@@ -17,6 +17,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "spectre.css": "^0.5.9",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
@@ -57,5 +58,6 @@
     "apollo": "^2.33.4",
     "eslint": "^7.31.0",
     "eslint-plugin-react": "^7.24.0"
-  }
+  },
+  "proxy": "http://localhost:8080"
 }

src/App.tsx

@@ -4,8 +4,8 @@ import FileBrowser from "./components/FileBrowser"
 
 const App: React.FC = () => {
 	return (
-		<div className="App">
-			<FileBrowser></FileBrowser>
+		<div className="container">
+			<FileBrowser/>
 		</div>
 	)
 }

src/components/Breadcrum.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+interface Props{
+    path: string
+    onDirClick?: (path: string) => void
+}
+
+const Breadcrum: React.FC<Props> = (props) => {
+	const parts = props.path.split("/").filter(e=>e.length > 0)
+
+	return (
+		<ul className="breadcrumb">
+			<li className="breadcrumb-item">
+				<a onClick={()=>{
+					props.onDirClick?.("/")
+				}}>
+                    Root
+				</a>
+			</li>
+			{parts.map((e,i,arr)=>(
+				<li key={e} className="breadcrumb-item">
+					<a onClick={()=>{
+						props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
+					}}>{e}</a>
+				</li>))}
+		</ul>
+	)
+}
+
+Breadcrum.propTypes = {
+	path: PropTypes.string.isRequired,
+	onDirClick: PropTypes.func
+}
+
+export default Breadcrum

src/components/DirectoryElement.tsx

@@ -8,9 +8,14 @@ interface Props {
 
 const DirectoryElement: React.FC<Props> = (props) => {
 	return (
-		<div>
-            📂 {props.dir.name}
-		</div>
+		<>
+			<td>
+				📂
+			</td>
+			<td>
+				{props.dir.name}
+			</td>
+		</>
 	)
 }
 

src/components/FileBrowser.tsx

@@ -1,17 +1,9 @@
 import React from "react"
 import { useState } from "react"
 import { useOpenDirQuery } from "../generated/graphql"
+import Breadcrum from "./Breadcrum"
 import FileBrowserElement from "./FileBrowserElement"
 
-function parentDir(path:string): string {
-	if(path.endsWith("/")){
-		path = path.substr(0,path.length - 1)
-	}
-	const paths = path.split("/")
-	paths.pop()
-	return paths.join("/")
-}
-
 const FileBrowser: React.FC = () => {
 	const [path,setPath] = useState("/")
 
@@ -23,24 +15,34 @@ const FileBrowser: React.FC = () => {
 
 	return (
 		<div>
-			<div onClick={()=>{
-				setPath(parentDir(path))
-			}}>
-                ..
-			</div>
+			<Breadcrum path={path} onDirClick={(newPath)=>{
+				console.debug(newPath)
+				setPath(newPath)
+			}}/>
 			<div>
-				{ data?.files.map(v => (<FileBrowserElement 
-					key={v?.id}
-					file={v}
-				/>))}
+				<table className="table table-striped table-hover">
+					<thead>
+						<tr>
+							<th>Icon</th>
+							<th>Name</th>
+						</tr>
+					</thead>
+					<tbody>
 
-				{ data?.directorys.map(v => (<FileBrowserElement
-					key={v?.id}
-					dir={v}
-					onClick={(data)=>{
-						setPath(data.id)
-					}}
-				/>))}
+						{ data?.directorys.map(v => (<FileBrowserElement
+							key={v?.id}
+							dir={v}
+							onClick={(data)=>{
+								setPath(data.id)
+							}}
+						/>))}
+							
+						{ data?.files.map(v => (<FileBrowserElement 
+							key={v?.id}
+							file={v}
+						/>))}
+					</tbody>
+				</table>
 			</div>
 		</div>
 	)

src/components/FileBrowserElement.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 const FileBrowserElement: React.FC<Props> = (props) => {
 	return (
-		<div onClick={()=>{
+		<tr onClick={()=>{
 			if(props.file){
 				props.onClick?.(props.file)
 			}else if(props.dir){
@@ -20,7 +20,7 @@ const FileBrowserElement: React.FC<Props> = (props) => {
 			}
 		}}>
 			{(props.file) ? <FileElement file={props.file}/>:(props.dir)?<DirectoryComponent dir={props.dir} />:<></>}
-		</div>
+		</tr>
 	)
 }
 

src/components/FileElement.tsx

@@ -8,9 +8,14 @@ interface Props {
 
 const FileElement: React.FC<Props> = (props) => {
 	return (
-		<div>
-            📄 {props.file.name}
-		</div>
+		<>
+			<td>
+				📄
+			</td>
+			<td>
+				{props.file.name}
+			</td>
+		</>
 	)
 }
 

src/index.tsx

@@ -3,9 +3,10 @@ import ReactDOM from "react-dom"
 import "./index.scss"
 import App from "./App"
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
+import "spectre.css"
 
 const client = new ApolloClient({
-	uri: "http://localhost:8080/graphql",
+	uri: "/graphql",
 	cache: new InMemoryCache()
 })
 

yarn.lock

@@ -12959,6 +12959,11 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+spectre.css@^0.5.9:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/spectre.css/-/spectre.css-0.5.9.tgz#86c732d093036d9fdc0a2ba570f005e4023ae6ca"
+  integrity sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw==
+
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz"