Shapes go brrr

src/App.js

@@ -1,10 +1,9 @@
 import './App.css';
+import Diagram from './diagram';
 
 function App() {
   return (
-    <h1 className="text-3xl font-bold underline">
+    <Diagram/>
-      Hello world!
-    </h1>
   );
 }
 

src/diagram/index.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from "react";
+import { dia, shapes } from "jointjs";
+
+function Diagram() {
+  const canvas = useRef(null);
+
+  useEffect(() => {
+    const graph = new dia.Graph();
+
+    new dia.Paper({
+      el: document.getElementById("canvas"),
+      background: {
+        color: "#F1F92A",
+      },
+      model: graph,
+      height: window.height,
+      width: window.width,
+      gridSize: 1,
+      interactive: true,
+    });
+
+    const rect = new shapes.standard.Rectangle();
+    rect.position(100, 100);
+    rect.resize(100, 40);
+    rect.attr({
+      body: {
+        fill: "#7039FF",
+      },
+      label: {
+        text: "hi",
+        fill: "white",
+      },
+    });
+    rect.addTo(graph);
+  }, []);
+
+  return (
+    <>
+      <div id="canvas" className="h-screen w-screen" ref={canvas} />
+    </>
+  );
+}
+
+export default Diagram;