XeNote/components/FolderTree.js

import * as React from 'react';
import { TreeView, TreeItem } from '@mui/x-tree-view';
import { useRouter } from 'next/router'
import { styled } from '@mui/material/styles';

const TCTreeItem = styled(TreeItem)(({ theme }) => ({
  '& .MuiTreeItem-content': {
    borderRadius: '10px',
    '&:hover': {
      backgroundColor: 'rgba(25, 118, 210, 0.59)'
    },
    '& .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 router = useRouter()

  const memoTree = React.useMemo(() => renderTree(props.tree), [props.tree])
  const expandedNodes = [props.tree.id]

  return (
    <>
      <a href="http://localhost:3000" className="">{"<-"} Back To Portfolio</a>

      <TreeView
        aria-label="rich object"
        defaultCollapseIcon={<ChevronDownIcon />}
        defaultExpanded={expandedNodes}
        defaultExpandIcon={<ChevronRightIcon />}
        onNodeSelect={(event, nodIds) => {
          const currentNode = props.flattenNodes.find(aNode => {
            return aNode.id === nodIds
          })
          if (currentNode != null && currentNode.routePath != null) {
            router.push(currentNode.routePath)
          }
        }}
        sx={{ overflowY: 'scroll' }}
      >
        {memoTree}
      </TreeView>
    </>
  );
}

function ChevronRightIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
      <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
    </svg>
  )
}

function ChevronDownIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
      <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
    </svg>
  )
}

function renderTree(nodes, layer) {
  return (
    <TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name} sx={{ marginLeft: 1 * layer }}>
      {Array.isArray(nodes.children)
        ? nodes.children.map((node) => renderTree(node, layer + 1))
        : null}
    </TCTreeItem>
  )
}