stinky poopy working code to add shapes

src/components/diagram/index.jsx

@@ -1,18 +1,17 @@
 import React, { useEffect, useRef } from "react";
 import { dia, shapes } from "jointjs";
 
-function Diagram() {
+function Diagram(props) {
   const canvas = useRef(null);
 
   useEffect(() => {
-    const graph = new dia.Graph();
 
     new dia.Paper({
       el: document.getElementById("canvas"),
       background: {
         color: "#aec3b0",
       },
-      model: graph,
+      model: props.graph,
       height: "100%",
       width: "100%",
       gridSize: 1,
@@ -31,8 +30,8 @@ function Diagram() {
         fill: "white",
       },
     });
-    rect.addTo(graph);
-  }, []);
+    rect.addTo(props.graph);
+  }, [props.graph]);
 
   return <div id="canvas" ref={canvas} />;
 }

src/components/header/index.jsx

@@ -12,7 +12,7 @@ export default function Header(props) {
         <button className="me-6 border px-4 py-1 rounded-xl">
           <i className="fa-solid fa-lock me-2"></i>Share
         </button>
-        <img src={blank_pfp} alt="profile" className="rounded-full h-10 w-10" />
+        <img src={blank_pfp} alt="profile" className="rounded-full h-8 w-8" />
       </div>
     </nav>
   );