Make logo

src/components/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: "100%",
+      width: "100%",
+      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="max-w-full h-full" ref={canvas} />
+    </>
+  );
+}
+
+export default Diagram;

src/components/header/index.css

@@ -0,0 +1,3 @@
+.bg-blue{
+    background-color: #124559;
+}

src/components/header/index.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import blank_pfp from "../../assets/blank_pfp.webp";
+import logo from "../../assets/logo_80.png";
+import "./index.css";
+
+export default function Header(props) {
+  return (
+    <nav className="flex justify-between py-4 bg-blue text-white items-center">
+      <img width={142} src={logo} alt="logo" className="ms-5" />
+      <div className="text-xl">{props.name}</div>
+      <div className="flex justify-around items-center text-md me-5">
+        <button className="me-4 border px-3 py-1 rounded-lg">
+          <i class="fa-solid fa-lock me-2"></i>Share
+        </button>
+        <img src={blank_pfp} alt="profile" className="rounded-full h-10 w-10" />
+      </div>
+    </nav>
+  );
+}