@@ -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.test.local | |||
.env.production.local | |||
.env | |||
# vercel | |||
.vercel | |||
.vs/ |
@@ -0,0 +1,2 @@ | |||
/// <reference types="next" /> | |||
/// <reference types="next/types/global" /> |
@@ -8,8 +8,18 @@ | |||
"start": "next start" | |||
}, | |||
"dependencies": { | |||
"@auth0/nextjs-auth0": "^1.3.0", | |||
"discord.js": "^12.5.3", | |||
"next": "10.1.3", | |||
"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" | |||
] | |||
} |