[Haik]: and so it begins

debugger/debugger_gui/src/components/tree/Tree.css

@@ -0,0 +1,7 @@
+.tree-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+  }

debugger/debugger_gui/src/components/tree/Tree.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import TreeNode from '../tree_node/TreeNode';
+import './Tree.css';
+
+const Tree = ({ projectStructure, expanded, handleExpandClick, handleCheckboxChange, handleColorChange, handleEmojiChange}) => {
+    const renderTree = (node, parentId = '') => {
+        const nodeId = parentId ? `${parentId}/${node.name}` : node.name;
+
+        return (
+            <TreeNode
+                key={nodeId}
+                node={node}
+                nodeId={nodeId}
+                expanded={expanded}
+                handleExpandClick={handleExpandClick}
+                handleCheckboxChange={handleCheckboxChange}
+                handleColorChange={handleColorChange}
+                handleEmojiChange={handleEmojiChange}
+                renderTree={renderTree}
+            />
+        );
+    };
+
+    if (!Array.isArray(projectStructure)) return null; // Ensure projectStructure is an array
+
+    return (
+        <div className='tree-container'>
+            {projectStructure.map((node) => renderTree(node))}
+        </div>
+    );
+};
+
+export default Tree;