[feat] trees

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "skill-hub",
       "version": "0.0.0",
       "dependencies": {
+        "@balkangraph/orgchart.js": "^8.14.19",
         "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -90,6 +91,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@balkangraph/orgchart.js": {
+      "version": "8.14.19",
+      "resolved": "https://registry.npmjs.org/@balkangraph/orgchart.js/-/orgchart.js-8.14.19.tgz",
+      "integrity": "sha512-pa4km/5mTWmMcVLBIsHcuC73s4y1La9BOx4AU9ilGetQwlAbWfrFcSU7hf8FO49otmk1AysfBhPrcBoRl2i46w=="
+    },
     "node_modules/@esbuild/darwin-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@balkangraph/orgchart.js": "^8.14.19",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",

frontend/src/App.tsx

@@ -7,8 +7,6 @@ import {
 } from "react-router-dom";
 import Landing from "./components/pages/Landing/Landing";
 import Main from "./components/pages/Main/Main";
-import Teams from "./components/pages/Teams/Teams";
-import MyTeams from "./components/pages/MyTeams/MyTeams";
 import Successful from "./components/pages/Successful/Successful";
 import AdminPage from "./components/pages/Admin/Admin";
 

frontend/src/components/pages/Tree/Tree.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import OrgChart from "../../../mytree.jsx";
+
+const Tree = () => {
+  return (
+    <div style={{ height: "100%" }}>
+      <OrgChart
+        nodes={[
+          { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
+          { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
+          { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
+          { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg" },
+          { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://cdn.balkan.app/shared/6.jpg" },
+          { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://cdn.balkan.app/shared/7.jpg" },
+          { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://cdn.balkan.app/shared/8.jpg" },
+        ]}
+      />
+    </div>
+  );
+};
+export default Tree;

frontend/src/mytree.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import OrgChart from "@balkangraph/orgchart.js";
+
+export default class Chart extends Component {
+  constructor(props) {
+    super(props);
+    this.divRef = React.createRef();
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentDidMount() {
+    this.chart = new OrgChart(this.divRef.current, {
+      nodes: this.props.nodes,
+
+      nodeBinding: {
+        field_0: "name",
+        img_0: "img",
+      },
+    });
+  }
+
+  render() {
+    return <div id="tree" ref={this.divRef}></div>;
+  }
+}