mirror of
https://github.com/Nezumi-2711/onedrive-vercel-index.git
synced 2026-09-22 13:38:45 +00:00
basic page structure, navbar and footer
This commit is contained in:
spencerwooo
@@ -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
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Spencer's OneDrive Index"
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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
|
||||||
+16
-7
@@ -1,20 +1,29 @@
|
|||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import Image from 'next/image'
|
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() {
|
export default function Home() {
|
||||||
|
const { query } = useRouter()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||||
<Head>
|
<Head>
|
||||||
<title>Create Next App</title>
|
<title>{siteConfig.title}</title>
|
||||||
<meta name="description" content="Generated by create next app" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<main>
|
<main className="flex flex-col w-full flex-1 bg-gray-50">
|
||||||
OneDrive Vercel Index
|
<Navbar />
|
||||||
|
<div className="mx-auto w-full max-w-4xl border-4 border-red-100">
|
||||||
|
<FileListing query={query} />
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer></footer>
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|||||||
+10
-3
@@ -1,8 +1,15 @@
|
|||||||
|
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
purge: [],
|
mode: 'jit',
|
||||||
darkMode: false, // or 'media' or 'class'
|
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
darkMode: 'media', // or 'media' or 'class'
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', '"Noto Sans SC"', ...defaultTheme.fontFamily.sans]
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
extend: {},
|
extend: {},
|
||||||
|
|||||||
Reference in New Issue
Block a user