@@ -0,0 +1,9 @@ | |||||
root=true | |||||
[*] | |||||
tab_width = 2 | |||||
indent_style = tab | |||||
indent_size = tab | |||||
trim_trailing_whitespace = true | |||||
insert_final_newline = true | |||||
charset = utf-8 |
@@ -29,6 +29,9 @@ yarn-error.log* | |||||
.env.development.local | .env.development.local | ||||
.env.test.local | .env.test.local | ||||
.env.production.local | .env.production.local | ||||
.env | |||||
# vercel | # vercel | ||||
.vercel | .vercel | ||||
.vs/ |
@@ -0,0 +1,2 @@ | |||||
/// <reference types="next" /> | |||||
/// <reference types="next/types/global" /> |
@@ -8,8 +8,18 @@ | |||||
"start": "next start" | "start": "next start" | ||||
}, | }, | ||||
"dependencies": { | "dependencies": { | ||||
"@auth0/nextjs-auth0": "^1.3.0", | |||||
"discord.js": "^12.5.3", | |||||
"next": "10.1.3", | "next": "10.1.3", | ||||
"react": "17.0.2", | "react": "17.0.2", | ||||
"react-dom": "17.0.2" | |||||
"react-dom": "17.0.2", | |||||
"react-feather": "^2.0.9", | |||||
"styled-components": "^5.2.3" | |||||
}, | |||||
"devDependencies": { | |||||
"@types/node": "^14.14.37", | |||||
"@types/react": "^17.0.3", | |||||
"@types/styled-components": "^5.1.9", | |||||
"typescript": "^4.2.3" | |||||
} | } | ||||
} | } |
@@ -1,7 +0,0 @@ | |||||
import '../styles/globals.css' | |||||
function MyApp({ Component, pageProps }) { | |||||
return <Component {...pageProps} /> | |||||
} | |||||
export default MyApp |
@@ -1,5 +0,0 @@ | |||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction | |||||
export default (req, res) => { | |||||
res.status(200).json({ name: 'John Doe' }) | |||||
} |
@@ -1,65 +0,0 @@ | |||||
import Head from 'next/head' | |||||
import styles from '../styles/Home.module.css' | |||||
export default function Home() { | |||||
return ( | |||||
<div className={styles.container}> | |||||
<Head> | |||||
<title>Create Next App</title> | |||||
<link rel="icon" href="/favicon.ico" /> | |||||
</Head> | |||||
<main className={styles.main}> | |||||
<h1 className={styles.title}> | |||||
Welcome to <a href="https://nextjs.org">Next.js!</a> | |||||
</h1> | |||||
<p className={styles.description}> | |||||
Get started by editing{' '} | |||||
<code className={styles.code}>pages/index.js</code> | |||||
</p> | |||||
<div className={styles.grid}> | |||||
<a href="https://nextjs.org/docs" className={styles.card}> | |||||
<h3>Documentation →</h3> | |||||
<p>Find in-depth information about Next.js features and API.</p> | |||||
</a> | |||||
<a href="https://nextjs.org/learn" className={styles.card}> | |||||
<h3>Learn →</h3> | |||||
<p>Learn about Next.js in an interactive course with quizzes!</p> | |||||
</a> | |||||
<a | |||||
href="https://github.com/vercel/next.js/tree/master/examples" | |||||
className={styles.card} | |||||
> | |||||
<h3>Examples →</h3> | |||||
<p>Discover and deploy boilerplate example Next.js projects.</p> | |||||
</a> | |||||
<a | |||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | |||||
className={styles.card} | |||||
> | |||||
<h3>Deploy →</h3> | |||||
<p> | |||||
Instantly deploy your Next.js site to a public URL with Vercel. | |||||
</p> | |||||
</a> | |||||
</div> | |||||
</main> | |||||
<footer className={styles.footer}> | |||||
<a | |||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | |||||
target="_blank" | |||||
rel="noopener noreferrer" | |||||
> | |||||
Powered by{' '} | |||||
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} /> | |||||
</a> | |||||
</footer> | |||||
</div> | |||||
) | |||||
} |
@@ -0,0 +1,20 @@ | |||||
import styled from 'styled-components' | |||||
const Base = styled('button')({ | |||||
height: '2.5rem', | |||||
border: 0, | |||||
borderRadius: '0.25rem', | |||||
backgroundColor: 'var(--color-fg, black)', | |||||
color: 'var(--color-bg, white)', | |||||
font: 'inherit', | |||||
padding: '0 1rem', | |||||
cursor: 'pointer', | |||||
}) | |||||
const Button = (props) => { | |||||
return ( | |||||
<Base {...props} /> | |||||
) | |||||
} | |||||
export default Button |
@@ -0,0 +1,19 @@ | |||||
import styled from 'styled-components' | |||||
const Base = styled('input')({ | |||||
height: '2.5rem', | |||||
border: '0.125rem solid', | |||||
backgroundColor: 'var(--color-bg, white)', | |||||
color: 'var(--color-fg, black)', | |||||
font: 'inherit', | |||||
padding: '0 1rem', | |||||
cursor: 'pointer', | |||||
}) | |||||
const TextInput = (props) => { | |||||
return ( | |||||
<Base {...props} /> | |||||
) | |||||
} | |||||
export default TextInput |
@@ -0,0 +1,68 @@ | |||||
import styled from 'styled-components' | |||||
const Image = styled('img')({ | |||||
position: 'absolute', | |||||
top: 0, | |||||
left: 0, | |||||
width: '100%', | |||||
height: '100%', | |||||
}) | |||||
const Figcaption = styled('figcaption')({ | |||||
position: 'absolute', | |||||
bottom: 0, | |||||
left: 0, | |||||
width: '100%', | |||||
padding: '0.5rem 1rem', | |||||
boxSizing: 'border-box', | |||||
zIndex: 1, | |||||
'::before': { | |||||
position: 'absolute', | |||||
top: 0, | |||||
left: 0, | |||||
width: '100%', | |||||
height: '100%', | |||||
content: "''", | |||||
backgroundColor: 'var(--color-bg, white)', | |||||
opacity: 0.5, | |||||
zIndex: -1, | |||||
}, | |||||
}) | |||||
const Base = styled('figure')({ | |||||
position: 'relative', | |||||
width: '100%', | |||||
height: '100%', | |||||
margin: 0, | |||||
[`${Figcaption}`]: { | |||||
opacity: 0, | |||||
}, | |||||
[`:hover ${Figcaption}`]: { | |||||
opacity: 1, | |||||
}, | |||||
}) | |||||
const Name = styled('span')({ | |||||
display: 'block', | |||||
whiteSpace: 'nowrap', | |||||
}) | |||||
const FolderItem = ({ | |||||
name, | |||||
url, | |||||
}) => { | |||||
return ( | |||||
<Base> | |||||
<Image | |||||
src={url} | |||||
/> | |||||
<Figcaption> | |||||
<Name> | |||||
{name} | |||||
</Name> | |||||
</Figcaption> | |||||
</Base> | |||||
) | |||||
} | |||||
export default FolderItem |
@@ -0,0 +1,87 @@ | |||||
import { User } from 'react-feather' | |||||
import styled, { createGlobalStyle } from 'styled-components' | |||||
import TextInput from '../../../molecules/TextInput' | |||||
import Button from '../../../molecules/Button' | |||||
const Variables = createGlobalStyle({ | |||||
':root': { | |||||
'--size-topbar': '4rem', | |||||
}, | |||||
}) | |||||
const Container = styled('div')({ | |||||
maxWidth: 1080, | |||||
padding: '0 1rem', | |||||
boxSizing: 'border-box', | |||||
margin: '0 auto', | |||||
}) | |||||
const Base = styled('div')({ | |||||
position: 'fixed', | |||||
top: 0, | |||||
left: 0, | |||||
width: '100%', | |||||
backgroundColor: 'var(--color-bg)', | |||||
zIndex: 2, | |||||
'~ *': { | |||||
paddingTop: 'var(--size-topbar)', | |||||
}, | |||||
}) | |||||
const Contents = styled('div')({ | |||||
display: 'flex', | |||||
alignItems: 'center', | |||||
justifyContent: 'space-between', | |||||
height: 'var(--size-topbar)', | |||||
}) | |||||
const Sides = styled('div')({ | |||||
width: '6rem', | |||||
}) | |||||
const RightSide = styled(Sides)({ | |||||
textAlign: 'right', | |||||
}) | |||||
const Search = styled('div')({ | |||||
flex: 'auto', | |||||
display: 'flex', | |||||
margin: '0 1rem', | |||||
}) | |||||
const StyledTextInput = styled(TextInput)({ | |||||
flex: 'auto', | |||||
marginRight: '1rem', | |||||
}) | |||||
const TopBar = ({ | |||||
query = '', | |||||
}) => { | |||||
return ( | |||||
<> | |||||
<Variables /> | |||||
<Base> | |||||
<Container> | |||||
<Contents> | |||||
<Sides> | |||||
Bruhbot | |||||
</Sides> | |||||
<Search> | |||||
<StyledTextInput | |||||
/> | |||||
<Button> | |||||
Search | |||||
</Button> | |||||
</Search> | |||||
<RightSide> | |||||
<User /> | |||||
</RightSide> | |||||
</Contents> | |||||
</Container> | |||||
</Base> | |||||
</> | |||||
) | |||||
} | |||||
export default TopBar |
@@ -0,0 +1,269 @@ | |||||
import Head from 'next/head' | |||||
import Link from 'next/link' | |||||
import styled, { createGlobalStyle } from 'styled-components' | |||||
import { Folder, Settings, Trash2 } from 'react-feather' | |||||
import Button from '../../molecules/Button' | |||||
import TopBar from '../../organisms/widgets/TopBar' | |||||
import FolderItem from '../../organisms/tree/FolderItem' | |||||
const Variables = createGlobalStyle({ | |||||
':root': { | |||||
'--size-sidebar': '360px', | |||||
}, | |||||
}) | |||||
const Container = styled('div')({ | |||||
maxWidth: 720, | |||||
padding: '0 1rem', | |||||
boxSizing: 'border-box', | |||||
}) | |||||
const SideBar = styled('div')({ | |||||
width: 'calc(50% - var(--size-sidebar) * 0.5)', | |||||
backgroundColor: 'var(--color-bg, white)', | |||||
position: 'fixed', | |||||
top: 0, | |||||
left: 0, | |||||
height: '100%', | |||||
}) | |||||
const SideBarContainer = styled('div')({ | |||||
marginLeft: 'auto', | |||||
width: 'var(--size-sidebar)', | |||||
}) | |||||
const Main = styled('div')({ | |||||
paddingLeft: 'calc(50% - var(--size-sidebar) * 0.5)', | |||||
}) | |||||
const FolderInfoContainer = styled(Container)({ | |||||
display: 'flex', | |||||
justifyContent: 'space-between', | |||||
height: '4rem', | |||||
alignItems: 'center', | |||||
}) | |||||
const SidebarLink = styled('a')({ | |||||
display: 'flex', | |||||
height: '4rem', | |||||
alignItems: 'center', | |||||
}) | |||||
const InnerSidebar = styled('div')({ | |||||
width: 'calc(var(--size-sidebar) - 4rem)', | |||||
height: '100%', | |||||
position: 'absolute', | |||||
top: 0, | |||||
right: 0, | |||||
backgroundColor: 'var(--color-bg, white)', | |||||
}) | |||||
const SideBarIcon = styled('div')({ | |||||
width: '4rem', | |||||
height: '4rem', | |||||
display: 'grid', | |||||
placeContent: 'center', | |||||
}) | |||||
const SidebarContents = styled('div')({ | |||||
width: '100%', | |||||
height: '100%', | |||||
position: 'relative', | |||||
}) | |||||
const Tree = styled('div')({ | |||||
width: '100%', | |||||
height: '100%', | |||||
overflow: 'auto', | |||||
}) | |||||
const TreeParent = styled('ul')({ | |||||
margin: 0, | |||||
padding: 0, | |||||
}) | |||||
const TreeChild = styled('li')({ | |||||
display: 'block', | |||||
}) | |||||
const TreeActions = styled('div')({ | |||||
position: 'sticky', | |||||
display: 'flex', | |||||
justifyContent: 'flex-end', | |||||
alignItems: 'center', | |||||
top: 0, | |||||
left: 0, | |||||
width: '100%', | |||||
height: '4rem', | |||||
backgroundColor: 'var(--color-bg, white)', | |||||
padding: '0 1rem', | |||||
boxSizing: 'border-box', | |||||
}) | |||||
const TreeLink = styled('a')({ | |||||
display: 'inline-flex', | |||||
verticalAlign: 'top', | |||||
height: '2rem', | |||||
alignItems: 'center', | |||||
whiteSpace: 'nowrap', | |||||
padding: '0 1rem', | |||||
boxSizing: 'border-box', | |||||
[`+ ${TreeParent}`]: { | |||||
paddingLeft: '1.5rem', | |||||
}, | |||||
}) | |||||
const FolderGrid = styled('div')({ | |||||
display: 'grid', | |||||
gridTemplateColumns: 'repeat(3, 1fr)', | |||||
gap: '0.5rem', | |||||
margin: '2rem 0 4rem', | |||||
}) | |||||
const FolderGridCell = styled('div')({ | |||||
paddingBottom: '100%', | |||||
position: 'relative', | |||||
}) | |||||
const FolderGridContents = styled('div')({ | |||||
position: 'absolute', | |||||
top: 0, | |||||
left: 0, | |||||
width: '100%', | |||||
height: '100%', | |||||
}) | |||||
const Header = styled('div')({ | |||||
position: 'sticky', | |||||
top: 'var(--size-topbar)', | |||||
left: 0, | |||||
width: '100%', | |||||
zIndex: 2, | |||||
backgroundColor: 'var(--color-bg, white)', | |||||
}) | |||||
const renderChild = c => ( | |||||
<TreeChild | |||||
key={c.id} | |||||
> | |||||
<TreeLink> | |||||
{c.name} | |||||
</TreeLink> | |||||
<TreeParent> | |||||
{c.children.map(renderChild)} | |||||
</TreeParent> | |||||
</TreeChild> | |||||
) | |||||
const FolderTemplate = ({ | |||||
path = [], | |||||
query = '', | |||||
id = '', | |||||
children, | |||||
items = [], | |||||
}) => { | |||||
return ( | |||||
<> | |||||
<Head> | |||||
<title>{ Array.isArray(path) && path.length > 0 ? `${path.slice(-1)[0]} | Bruhbot` : 'Bruhbot' }</title> | |||||
<link rel="icon" href="/favicon.ico" /> | |||||
</Head> | |||||
<Variables /> | |||||
<TopBar | |||||
query={query} | |||||
/> | |||||
<SideBar> | |||||
<SidebarContents> | |||||
<Link | |||||
href={{ | |||||
pathname: '/my/folders', | |||||
}} | |||||
passHref | |||||
> | |||||
<SidebarLink> | |||||
<SideBarContainer> | |||||
<SideBarIcon> | |||||
<Folder /> | |||||
</SideBarIcon> | |||||
</SideBarContainer> | |||||
</SidebarLink> | |||||
</Link> | |||||
<Link | |||||
href={{ | |||||
pathname: '/my/bin', | |||||
}} | |||||
passHref | |||||
> | |||||
<SidebarLink> | |||||
<SideBarContainer> | |||||
<SideBarIcon> | |||||
<Trash2 /> | |||||
</SideBarIcon> | |||||
</SideBarContainer> | |||||
</SidebarLink> | |||||
</Link> | |||||
<Link | |||||
href={{ | |||||
pathname: '/my/settings', | |||||
}} | |||||
passHref | |||||
> | |||||
<SidebarLink> | |||||
<SideBarContainer> | |||||
<SideBarIcon> | |||||
<Settings /> | |||||
</SideBarIcon> | |||||
</SideBarContainer> | |||||
</SidebarLink> | |||||
</Link> | |||||
<InnerSidebar> | |||||
<Tree> | |||||
<TreeActions> | |||||
<Button> | |||||
New Folder | |||||
</Button> | |||||
</TreeActions> | |||||
<TreeParent> | |||||
{children.map(renderChild)} | |||||
</TreeParent> | |||||
</Tree> | |||||
</InnerSidebar> | |||||
</SidebarContents> | |||||
</SideBar> | |||||
<Main> | |||||
<Header> | |||||
<FolderInfoContainer> | |||||
<div> | |||||
Folder ID: {id} | |||||
</div> | |||||
<div> | |||||
<Button> | |||||
Delete | |||||
</Button> | |||||
</div> | |||||
</FolderInfoContainer> | |||||
</Header> | |||||
<Container> | |||||
<FolderGrid> | |||||
{ | |||||
items.map(i => ( | |||||
<FolderGridCell | |||||
key={i.id} | |||||
> | |||||
<FolderGridContents> | |||||
<FolderItem | |||||
name={i.name} | |||||
url={i.url} | |||||
/> | |||||
</FolderGridContents> | |||||
</FolderGridCell> | |||||
)) | |||||
} | |||||
</FolderGrid> | |||||
</Container> | |||||
</Main> | |||||
</> | |||||
) | |||||
} | |||||
export default FolderTemplate |
@@ -0,0 +1,12 @@ | |||||
import * as React from 'react' | |||||
import { UserProvider } from '@auth0/nextjs-auth0' | |||||
import '../styles/globals.css' | |||||
export default function App({ Component, pageProps }) { | |||||
return ( | |||||
<UserProvider> | |||||
<Component {...pageProps} /> | |||||
</UserProvider> | |||||
); | |||||
} |
@@ -0,0 +1,28 @@ | |||||
import Document from 'next/document' | |||||
import { ServerStyleSheet } from 'styled-components' | |||||
export default class MyDocument extends Document { | |||||
static async getInitialProps(ctx) { | |||||
const sheet = new ServerStyleSheet() | |||||
const originalRenderPage = ctx.renderPage | |||||
try { | |||||
ctx.renderPage = () => originalRenderPage({ | |||||
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), | |||||
}) | |||||
const initialProps = await Document.getInitialProps(ctx) | |||||
return { | |||||
...initialProps, | |||||
styles: ( | |||||
<> | |||||
{initialProps.styles} | |||||
{sheet.getStyleElement()} | |||||
</> | |||||
), | |||||
} | |||||
} finally { | |||||
sheet.seal() | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,3 @@ | |||||
import { handleAuth } from '@auth0/nextjs-auth0' | |||||
export default handleAuth() |
@@ -0,0 +1,40 @@ | |||||
import { getSession } from '@auth0/nextjs-auth0' | |||||
import { GetServerSideProps } from 'next' | |||||
import Head from 'next/head' | |||||
import styled from 'styled-components' | |||||
const Container = styled('div')({ | |||||
maxWidth: 720, | |||||
margin: '0 auto', | |||||
padding: '0 1rem', | |||||
boxSizing: 'border-box', | |||||
}) | |||||
const Home = () => { | |||||
return ( | |||||
<></> | |||||
) | |||||
} | |||||
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { | |||||
const session = getSession(req, res) | |||||
if (!session) { | |||||
return { | |||||
redirect: { | |||||
destination: '/api/auth/login', | |||||
permanent: false, | |||||
}, | |||||
} | |||||
} | |||||
return { | |||||
redirect: { | |||||
destination: '/my/folders', | |||||
permanent: false, | |||||
} | |||||
} | |||||
} | |||||
export default Home |
@@ -0,0 +1,194 @@ | |||||
import { GetServerSideProps } from 'next' | |||||
import FolderTemplate from '../../../components/templates/Folder' | |||||
const Home = ({ path, id, children, }) => { | |||||
return ( | |||||
<FolderTemplate | |||||
path={path} | |||||
id={id} | |||||
children={children} | |||||
/> | |||||
) | |||||
} | |||||
export const getServerSideProps: GetServerSideProps = async ({ query: nextQuery }) => { | |||||
const { q: query } = nextQuery | |||||
return { | |||||
props: { | |||||
query, | |||||
items: [ | |||||
{ | |||||
name: 'Bruh', | |||||
url: 'https://placehold.it/300', | |||||
} | |||||
], | |||||
children: [ | |||||
{ | |||||
id: '00000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 1', | |||||
children: [ | |||||
{ | |||||
id: '00000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '00000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '00000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '00000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '00000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: '10000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 2', | |||||
children: [ | |||||
{ | |||||
id: '10000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '10000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '10000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '10000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '10000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: '20000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '20000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '20000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '20000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '20000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '20000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: '30000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 4', | |||||
children: [ | |||||
{ | |||||
id: '30000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '30000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '30000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '30000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '30000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: '40000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 5', | |||||
children: [ | |||||
{ | |||||
id: '40000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '40000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '40000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '40000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '40000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
} | |||||
} | |||||
export default Home |
@@ -0,0 +1,196 @@ | |||||
import { GetServerSideProps } from 'next' | |||||
import FolderTemplate from '../../../components/templates/Folder' | |||||
const Home = ({ path, id, children, items, }) => { | |||||
return ( | |||||
<FolderTemplate | |||||
path={path} | |||||
id={id} | |||||
children={children} | |||||
items={items} | |||||
/> | |||||
) | |||||
} | |||||
export const getServerSideProps: GetServerSideProps = async ({ query: nextQuery }) => { | |||||
const { q: query = '' } = nextQuery | |||||
return { | |||||
props: { | |||||
query, | |||||
items: new Array(24).fill(0).map((_, i) => ( | |||||
{ | |||||
id: `11111111-1111-1111-11111111111${i}`, | |||||
name: 'Bruh', | |||||
url: 'http://placehold.it/300', | |||||
} | |||||
)), | |||||
children: [ | |||||
{ | |||||
id: '00000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 1', | |||||
children: [ | |||||
{ | |||||
id: '00000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '00000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '00000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '00000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '00000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: '10000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 2', | |||||
children: [ | |||||
{ | |||||
id: '10000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '10000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '10000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '10000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '10000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: '20000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '20000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '20000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '20000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '20000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '20000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: '30000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 4', | |||||
children: [ | |||||
{ | |||||
id: '30000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '30000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '30000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '30000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '30000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
{ | |||||
id: '40000000-0000-0000-000000000001', | |||||
name: 'Foo Folder 5', | |||||
children: [ | |||||
{ | |||||
id: '40000000-0000-0000-000000000002', | |||||
name: 'Bar Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '40000000-0000-0000-000000000003', | |||||
name: 'Bar Folder 2', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '40000000-0000-0000-000000000004', | |||||
name: 'Bar Folder 3', | |||||
children: [ | |||||
{ | |||||
id: '40000000-0000-0000-000000000005', | |||||
name: 'Baz Folder 1', | |||||
children: [], | |||||
}, | |||||
{ | |||||
id: '40000000-0000-0000-00000000006', | |||||
name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow', | |||||
children: [], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}, | |||||
} | |||||
} | |||||
export default Home |
@@ -0,0 +1,23 @@ | |||||
:root { | |||||
--color-bg: black; | |||||
--color-fg: white; | |||||
} | |||||
html, | |||||
body { | |||||
padding: 0; | |||||
margin: 0; | |||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, | |||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; | |||||
background-color: var(--color-bg, white); | |||||
color: var(--color-fg, black); | |||||
} | |||||
a { | |||||
color: inherit; | |||||
text-decoration: none; | |||||
} | |||||
* { | |||||
box-sizing: border-box; | |||||
} |
@@ -1,16 +0,0 @@ | |||||
html, | |||||
body { | |||||
padding: 0; | |||||
margin: 0; | |||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, | |||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; | |||||
} | |||||
a { | |||||
color: inherit; | |||||
text-decoration: none; | |||||
} | |||||
* { | |||||
box-sizing: border-box; | |||||
} |
@@ -0,0 +1,29 @@ | |||||
{ | |||||
"compilerOptions": { | |||||
"target": "es5", | |||||
"lib": [ | |||||
"dom", | |||||
"dom.iterable", | |||||
"esnext" | |||||
], | |||||
"allowJs": true, | |||||
"skipLibCheck": true, | |||||
"strict": false, | |||||
"forceConsistentCasingInFileNames": true, | |||||
"noEmit": true, | |||||
"esModuleInterop": true, | |||||
"module": "esnext", | |||||
"moduleResolution": "node", | |||||
"resolveJsonModule": true, | |||||
"isolatedModules": true, | |||||
"jsx": "preserve" | |||||
}, | |||||
"include": [ | |||||
"next-env.d.ts", | |||||
"**/*.ts", | |||||
"**/*.tsx" | |||||
], | |||||
"exclude": [ | |||||
"node_modules" | |||||
] | |||||
} |