fix some styles on folder tree

This commit is contained in:
Triston Armstrong 2023-12-31 15:16:04 -06:00
parent 58b03b3b96
commit ff36addc56

View File

@ -2,10 +2,10 @@ import * as React from 'react';
import { TreeView, TreeItem } from '@mui/x-tree-view'; import { TreeView, TreeItem } from '@mui/x-tree-view';
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import { Divider } from '@mui/material';
const TCTreeItem = styled(TreeItem)(({ theme }) => ({ const TCTreeItem = styled(TreeItem)(({ theme }) => ({
'& .MuiTreeItem-content': { '& .MuiTreeItem-content': {
borderRadius: '10px',
'& .MuiTreeItem-label': { '& .MuiTreeItem-label': {
fontSize: '1rem', fontSize: '1rem',
paddingLeft: '6px', paddingLeft: '6px',
@ -30,8 +30,8 @@ export default function FolderTree(props) {
const expandedNodes = [props.tree.id] const expandedNodes = [props.tree.id]
return ( return (
<> <>
<a href='http://localhost:3000'>{"<-"} Back To Portfolio</a> <a href="http://localhost:3000" class="mb-5 flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">{"<-"} Back To Portfolio</a>
<Divider />
<TreeView <TreeView
aria-label="rich object" aria-label="rich object"
defaultCollapseIcon={<ChevronDownIcon />} defaultCollapseIcon={<ChevronDownIcon />}
@ -45,7 +45,7 @@ export default function FolderTree(props) {
router.push(currentNode.routePath) router.push(currentNode.routePath)
} }
}} }}
sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} sx={{ flexGrow: 1, overflowY: 'auto' }}
> >
{renderTree(props.tree)} {renderTree(props.tree)}
</TreeView> </TreeView>