Triston Armstrong
fd51f273f4
- removes tailwind (was cool but dont need it) - reworks a lot of the html - utilize a no css... library? css file? idk - add a few details - rework the navigation on the built notes pages - write a bunch of tailwind like css classes - ... maybe some more, too lazy
79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
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>
|
|
)
|
|
}
|