import * as React from 'react'; import { TreeView, TreeItem } from '@mui/x-tree-view'; import { useRouter } from 'next/router' import { styled } from '@mui/material/styles'; import { Divider } from '@mui/material'; const TCTreeItem = styled(TreeItem)(({ theme }) => ({ '& .MuiTreeItem-content': { '& .MuiTreeItem-label': { fontSize: '1rem', paddingLeft: '6px', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,', lineHeight: 2.0, }, }, })) export default function FolderTree(props) { const renderTree = (nodes) => ( {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null} ); const router = useRouter() // const childrenNodeIds = props.tree.children.map(aNode => {return aNode.id}) const expandedNodes = [props.tree.id] return ( <> {"<-"} Back To Portfolio } defaultExpanded={expandedNodes} defaultExpandIcon={} onNodeSelect={(event, nodIds) => { const currentNode = props.flattenNodes.find(aNode => { return aNode.id === nodIds }) if (currentNode != null && currentNode.routePath != null) { router.push(currentNode.routePath) } }} sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} > {renderTree(props.tree)} ); } function ChevronRightIcon() { return ( ) } function ChevronDownIcon() { return ( ) }