basic page structure, navbar and footer

components/FileListing.tsx

@@ -0,0 +1,25 @@
+import { FunctionComponent } from 'react'
+import { ParsedUrlQuery } from 'querystring'
+
+const FileListing: FunctionComponent<{ query: ParsedUrlQuery }> = ({ query }) => {
+  const { path } = query
+
+  // Multiple levels of path
+  if (Array.isArray(path)) {
+    return (
+      <>
+        {path.map((p: any, i: number) => (
+          <div key="i">{p}</div>
+        ))}
+      </>
+    )
+  }
+
+  // Only one level of path
+  if (path) {
+    return <div>{path}</div>
+  }
+  return <div>index page</div>
+}
+
+export default FileListing

components/Footer.tsx

@@ -0,0 +1,5 @@
+const Footer = () => {
+  return <div className="p-4 text-sm text-gray-400">Powered by onedrive-vercel-index. Made with ❤ by SpencerWoo.</div>
+}
+
+export default Footer

components/Navbar.tsx

@@ -0,0 +1,13 @@
+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>
+    </div>
+  )
+}
+
+export default Navbar