Как сделать строки в дереве файлов ⇐ Javascript

[Anonymous]

Я создал дизайн в Figma и теперь пытаюсь отобразить его в браузере. Но я не представляю, как создавать строки перед дочерними узлами дерева в зависимости от структуры?
TreeNode.jsx

Код: Выделить всё

import classes from "./TreeNode.module.css"
import opened_file from "../../images/opened_file.svg"
import closed_file from "../../images/closed_file.svg"
import file_image from "../../images/file_image.svg"
import three_points from "../../images/three_points.svg"
import { useEffect, useState } from "react"

function TreeNode ({item}) {
const [element, setElement] = useState(item)

return (



{element.type === "FOALDER" &&

[img]{element.opened ? opened_file : closed_file} alt={classes.opened ? [/img]

}
{element.type === "FILE"
&&

[img]{file_image} alt=[/img]

}

{element.title}



[img]{three_points} alt=[/img]



{element.children?.map((x) =>  (

))}


);
}

export default TreeNode;

TreeNode.module.css

Код: Выделить всё

.treeNodeWrapper{
display: flex;
align-items: center;
padding-left: 20px;
padding-right: 18px;
justify-content: space-between;
padding-top: 7.25px;
padding-bottom: 7.25px;
position: relative;
}

.treeNodeLeftSide{
display: flex;
align-items: center;
}

.treeNodeOpened{
margin-right: 10px;
}

.treeNodeClosed{
margin-right: 7px;
}

.treeNodeFIleImage{
margin-right: 6px;
}

.treeNodeName{
font-family: "Inter", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: #5E6D83;
font-size: 12.88px;
letter-spacing: -2%;
line-height: 0px;
}

.nextTreeNode{
padding-left: 25px;
}

.treeNodeWrapper::before{
content: url('../../images/file_line_default.svg');
position: absolute;
left: -1.7px;
}

files.js

Код: Выделить всё

const files = [
{
id: 232141332,
title: "Documents",
type: "FOALDER",
opened: false,
level: 0,
fatherId: null,
children: [
{
id: 734573086,
title: "MA5600",
type: "FOALDER",
opened: true,
level: 1,
fatherId: 232141332,
children: [
{
id: 867407333,
title: "delete board",
type: "FILE",
opened: false,
level: 2,
fatherId: 734573086,
children: []
},
{
id: 110345245,
title: "add board",
type: "FILE",
opened: false,
level: 2,
fatherId: 734573086,
children: []
}
]
},
{
id: 222225454,
title: "C300M",
type: "FOALDER",
opened: false,
level: 1,
fatherId: 232141332,
children: [
{
id: 333334256,
title: "no option TR-82",
type: "FILE",
opened: false,
level: 2,
fatherId: 222225454,
children: []
}
]
}
]
},
{
id: 23232,
title: "Food",
type: "FOALDER",
opened: false,
level: 0,
fatherId: null,
children: [
{
id: 2323242,
title: "MA5600",
type: "FOALDER",
opened: false,
level: 1,
fatherId: 1224232,
children: [
{
id: 45674734,
title: "delete board",
type: "FILE",
opened: false,
level: 2,
fatherId: 734573086,
children: []
},
{
id: 5368876,
title: "add board",
type: "FILE",
opened: false,
level: 2,
fatherId: 734573086,
children: []
}
]
},
{
id: 258089,
title: "C300M",
type: "FOALDER",
opened: false,
level:  1,
fatherId: 232141332,
children: [
{
id: 1112312,
title: "no option TR-82",
type: "FILE",
opened: false,
level: 2,
fatherId: 222225454,
children: []
}
]
}
]
}
]

export default files;

Как мне сделать это, как на этом изображении, что мне нужно использовать css или js?


Как это теперь выглядит в браузере без строк:



Подробнее здесь: https://stackoverflow.com/questions/793 ... -file-tree