[feat] trees

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>;
+  }
+}