add font awesome, file icons, and more

components/Breadcrumb.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link'
+
+import { ParsedUrlQuery } from 'querystring'
+import { FunctionComponent } from 'react'
+
+const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) => {
+  if (query) {
+    const { path } = query
+    if (Array.isArray(path)) {
+      return (
+        <div className="py-2 text-sm text-gray-600 flex">
+          <div className="p-1 hover:text-black transition-all duration-75">
+            <Link href="/">🚩 Home</Link>
+          </div>
+          {path.map((q: string, i: number) => (
+            <div key={i} className="flex items-center">
+              <div>/</div>
+              <div className="p-1 hover:text-black transition-all duration-75">
+                <Link href={`/${path.slice(0, i + 1).join('/')}`}>{q}</Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div className="py-2 text-sm text-gray-600 hover:text-black transition-all duration-75">
+      <div className="p-1">
+        <Link href="/">🚩 Home</Link>
+      </div>
+    </div>
+  )
+}
+
+export default Breadcrumb

components/FileListing.tsx

@@ -1,8 +1,13 @@
 import axios from 'axios'
-import useSWR from 'swr'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import { ParsedUrlQuery } from 'querystring'
 import { FunctionComponent } from 'react'
+import useSWR from 'swr'
 import Link from 'next/link'
 
+import getFileIcon from '../utils/getFileIcon'
+
 const humanFileSize = (size: number) => {
   if (size < 1024) return size + ' B'
   const i = Math.floor(Math.log(size) / Math.log(1024))
@@ -12,17 +17,20 @@ const humanFileSize = (size: number) => {
   return `${formatted} ${'KMGTPEZY'[i - 1]}B`
 }
 
-const encodePath = (path: string) => {
-  const encodedPath = path === '/' ? '' : path
-  if (encodedPath === '/' || encodedPath === '') {
-    return ''
+const queryToPath = (query?: ParsedUrlQuery) => {
+  if (query) {
+    const { path } = query
+    if (!path) return '/'
+    if (typeof path === 'string') return `/${path}`
+    return `/${path.join('/')}`
   }
-  return encodedPath
+  return '/'
 }
 
 const fetcher = (url: string) => axios.get(url).then(res => res.data)
 
-const FileListing: FunctionComponent<{ path: string }> = ({ path }) => {
+const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) => {
+  const path = queryToPath(query)
   const { data, error } = useSWR(`/api?path=${path}`, fetcher)
   if (error) return <div>Failed to load</div>
   if (!data)
@@ -50,19 +58,25 @@ const FileListing: FunctionComponent<{ path: string }> = ({ path }) => {
   } = data
   return (
     <div className="bg-white shadow rounded">
-      <div className="p-3 grid grid-cols-9 items-center space-x-2">
-        <div className="col-span-6 font-bold">Name</div>
+      <div className="p-3 grid grid-cols-10 items-center space-x-2 border-b border-gray-200">
+        <div className="col-span-7 font-bold">Name</div>
         <div className="font-bold col-span-2">Created</div>
         <div className="font-bold">Size</div>
       </div>
       {children.map((c: any) => (
-        <Link href={`${encodePath(path)}/${c.name}`} key={c.id} passHref>
-          <div className="p-3 grid grid-cols-9 items-center space-x-2 cursor-pointer hover:bg-gray-100">
-            <div className="col-span-6 truncate">{c.name}</div>
-            <div className="font-mono text-sm col-span-2">
+        <Link href={`${path === '/' ? '' : path}/${c.name}`} key={c.id} passHref>
+          <div className="p-3 grid grid-cols-10 items-center space-x-2 cursor-pointer hover:bg-gray-100">
+            <div className="flex space-x-2 items-center col-span-7 truncate">
+              {/* <div>{c.file ? c.file.mimeType : 'folder'}</div> */}
+              <div className="w-5 text-center">
+                <FontAwesomeIcon icon={c.file ? getFileIcon(c.name) : ['far', 'folder']} />
+              </div>
+              <div className="truncate">{c.name}</div>
+            </div>
+            <div className="font-mono text-sm col-span-2 text-gray-700">
               {new Date(c.createdDateTime).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' })}
             </div>
-            <div className="font-mono text-sm">{humanFileSize(c.size)}</div>
+            <div className="font-mono text-sm text-gray-700">{humanFileSize(c.size)}</div>
           </div>
         </Link>
       ))}

components/Navbar.tsx

@@ -1,10 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
 import siteConfig from '../config/site.json'
 
 const Navbar = () => {
   return (
-    <div className="text-left bg-white p-2">
-      <div className="max-w-4xl w-full mx-auto">
-        <h1 className="font-bold text-lg">{siteConfig.title}</h1>
+    <div className="text-left bg-white p-3 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm">
+      <div className="max-w-4xl w-full mx-auto flex items-center justify-between">
+        <h1 className="font-bold text-xl">{siteConfig.title}</h1>
+        <a href="https://github.com/spencerwooo/onedrive-vercel-index" target="_blank" rel="noopener noreferrer">
+          <FontAwesomeIcon icon={['fab', 'github']} size="lg" />
+        </a>
       </div>
     </div>
   )