basic page structure, navbar and footer
This commit is contained in:
spencerwooo
parent
0f049edbce
commit
0d467cfa13
25
components/FileListing.tsx
Normal file
25
components/FileListing.tsx
Normal file
|
|
@ -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
|
||||
5
components/Footer.tsx
Normal file
5
components/Footer.tsx
Normal file
|
|
@ -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
|
||||
13
components/Navbar.tsx
Normal file
13
components/Navbar.tsx
Normal file
|
|
@ -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
|
||||
3
config/site.json
Normal file
3
config/site.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"title": "Spencer's OneDrive Index"
|
||||
}
|
||||
29
pages/[...path].tsx
Normal file
29
pages/[...path].tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import Head from 'next/head'
|
||||
import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
import siteConfig from '../config/site.json'
|
||||
import Navbar from '../components/Navbar'
|
||||
import FileListing from '../components/FileListing'
|
||||
import Footer from '../components/Footer'
|
||||
|
||||
export default function Folders() {
|
||||
const { query } = useRouter()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||
<Head>
|
||||
<title>{siteConfig.title}</title>
|
||||
</Head>
|
||||
|
||||
<main className="flex flex-col w-full flex-1 bg-gray-50">
|
||||
<Navbar />
|
||||
<div className="mx-auto w-full max-w-4xl">
|
||||
<FileListing query={query} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
pages/_document.tsx
Normal file
20
pages/_document.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import Document, { Head, Html, Main, NextScript } from 'next/document'
|
||||
|
||||
class MyDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<meta name="description" content="OneDrive Vercel Index" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument
|
||||
|
|
@ -1,20 +1,29 @@
|
|||
import Head from 'next/head'
|
||||
import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
import siteConfig from '../config/site.json'
|
||||
import Navbar from '../components/Navbar'
|
||||
import FileListing from '../components/FileListing'
|
||||
import Footer from '../components/Footer'
|
||||
|
||||
export default function Home() {
|
||||
const { query } = useRouter()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>{siteConfig.title}</title>
|
||||
</Head>
|
||||
|
||||
<main>
|
||||
OneDrive Vercel Index
|
||||
<main className="flex flex-col w-full flex-1 bg-gray-50">
|
||||
<Navbar />
|
||||
<div className="mx-auto w-full max-w-4xl border-4 border-red-100">
|
||||
<FileListing query={query} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer></footer>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
|
||||
module.exports = {
|
||||
purge: [],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
mode: 'jit',
|
||||
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: 'media', // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', '"Noto Sans SC"', ...defaultTheme.fontFamily.sans]
|
||||
}
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
|
|
|
|||
Loading…
Reference in a new issue