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'; import FolderViewMode from '../../../models/FolderViewMode'; import TextInput from '../../molecules/TextInput'; import {forClientSideState, Form} from '../../../utilities/handler'; import Method from '../../../utilities/handler/Method'; import {useRouter} from 'next/router'; 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 FolderListWrapper = styled('div')({ width: '100%', height: '100%', overflow: 'auto', }) const FolderList = styled('ul')({ margin: 0, padding: 0, }) const FolderListItem = styled('li')({ display: 'block', }) const FolderActions = 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 FolderLink = styled('a')({ display: 'inline-flex', minWidth: '100%', verticalAlign: 'top', height: '3rem', alignItems: 'center', whiteSpace: 'nowrap', padding: '0 1rem', boxSizing: 'border-box', }) 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 FolderIdInput = styled('input')({ fontFamily: 'monospace', fontSize: '0.875rem', display: 'block', width: '20em', border: 0, backgroundColor: 'transparent', color: 'inherit', padding: 0, margin: 0, outline: 0, }) const FolderIdBox = styled('span')({ display: 'inline-block', verticalAlign: 'middle', }) const FolderTemplate = ({ query, children, items = [], mode, hierarchy, }) => { const router = useRouter() const [currentFolder] = hierarchy.slice(-1) return ( <> {currentFolder.name} | Bruhbot
{ })} > {( )}
{ mode === FolderViewMode.NEW_FOLDER && (
) } {children.map(c => ( {c.name} ))}
{hierarchy.map(h => ( <> {'/ '} {h.name} {' '} ))}
Folder ID
{ Array.isArray(items) && items.length < 1 && ( <> This folder is empty. ) } { Array.isArray(items) && items.length > 0 && ( { items.map(i => ( )) } ) }
) } export default FolderTemplate