Make logo

public/index.html

@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://kit.fontawesome.com/e35edcd75e.js" crossorigin="anonymous"></script>
   </body>
 </html>

src/App.js

@@ -1,27 +1,10 @@
-import Diagram from "./diagram";
+import Editor from "./editor";
-import { ResizableBox } from "react-resizable";
-import "react-resizable/css/styles.css";
 
 function App() {
   return (
-    <div className="flex">
+    <>
-      <ResizableBox
+      <Editor name="Untitled"/>
-        width={window.innerWidth * 0.2}
+    </>
-        height={window.innerHeight}
-        resizeHandles={["e"]}
-        minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
-        axis="x"
-      >
-        <span className="text">window 1</span>
-      </ResizableBox>
-      <ResizableBox
-        width={window.innerWidth * 0.8}
-        height={window.innerHeight}
-        resizeHandles={[]}
-      >
-        <Diagram />
-      </ResizableBox>
-    </div>
   );
 }
 

src/components/diagram/index.jsx

@@ -13,7 +13,7 @@ function Diagram() {
         color: "#F1F92A",
       },
       model: graph,
-      height: window.innerHeight,
+      height: "100%",
       width: "100%",
       gridSize: 1,
       interactive: true,

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

src/editor/index.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Diagram from "../components/diagram";
+import { ResizableBox } from "react-resizable";
+import "react-resizable/css/styles.css";
+import Header from "../components/header";
+
+export default function Editor(props) {
+  return (
+    <>
+      <Header name={props.name} />
+      <div className="flex">
+        <ResizableBox
+          width={window.innerWidth * 0.2}
+          height={window.innerHeight}
+          resizeHandles={["e"]}
+          minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
+          maxConstraints={[Infinity, Infinity]}
+          axis="x"
+        >
+          <span className="text">window 1</span>
+        </ResizableBox>
+        <div>
+          <Diagram />
+        </div>
+        <div>hi</div>
+      </div>
+    </>
+  );
+}