- creating the right sidebar

- designing the artboard
- optimizing dark mode performance
- optimizing input onChange handler

src/components/builder/center/Artboard.js

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./Artboard.module.css";
+
+const Artboard = () => {
+  return <div className={styles.container}></div>;
+};
+
+export default Artboard;

src/components/builder/center/Artboard.module.css

@@ -0,0 +1,6 @@
+.container {
+  width: 400px;
+  height: 600px;
+  box-shadow: var(--shadow);
+  @apply bg-white;
+}

src/components/builder/left/LeftNavbar.js

@@ -1,5 +1,6 @@
 import { Link } from "gatsby";
 import React from "react";
+import { MdPerson } from "react-icons/md";
 import Avatar from "../../shared/Avatar";
 import Logo from "../../shared/Logo";
 import styles from "./LeftNavbar.module.css";
@@ -11,9 +12,16 @@ const LeftNavbar = () => {
         <Logo size="40px" />
       </Link>
 
-      <hr className="my-4" />
+      <hr className="my-6" />
 
-      <hr className="mt-auto my-4" />
+      <div className="grid grid-cols-1 gap-6">
+        <MdPerson
+          className="text-secondary-dark hover:text-primary"
+          size="20px"
+        />
+      </div>
+
+      <hr className="mt-auto my-6" />
 
       <Avatar />
     </div>

src/components/builder/left/LeftNavbar.module.css

@@ -2,5 +2,5 @@
   width: 75px;
   z-index: 20;
   box-shadow: var(--left-shadow);
-  @apply p-4 h-screen flex flex-col items-center;
+  @apply px-4 py-6 h-screen flex flex-col items-center;
 }

src/components/builder/left/LeftSidebar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Input from "../../shared/Input";
+import Profile from "../sections/Profile";
 import LeftNavbar from "./LeftNavbar";
 import styles from "./LeftSidebar.module.css";
 
@@ -9,13 +9,7 @@ const LeftSidebar = () => {
       <LeftNavbar />
 
       <div className={styles.container}>
-        <section>
-          <h2 className="text-4xl mb-8">Profile</h2>
-          <div className="flex items-center">
-            <div className={styles.circle}></div>
-            <Input label="Photograph" className="ml-6" />
-          </div>
-        </section>
+        <Profile />
       </div>
     </div>
   );

src/components/builder/left/LeftSidebar.module.css

@@ -3,10 +3,3 @@
   box-shadow: var(--left-shadow);
   @apply w-full h-screen p-8;
 }
-
-.circle {
-  width: 60px;
-  height: 60px;
-  flex: 0 0 60px;
-  @apply bg-gray-300 rounded-full;
-}

src/components/builder/right/RightNavbar.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { MdPerson } from "react-icons/md";
+import styles from "./RightNavbar.module.css";
+
+const RightNavbar = () => {
+  return (
+    <div className={styles.container}>
+      <div className="grid grid-cols-1 gap-6">
+        <MdPerson
+          className="text-secondary-dark hover:text-primary"
+          size="20px"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default RightNavbar;

src/components/builder/right/RightNavbar.module.css

@@ -0,0 +1,6 @@
+.container {
+  width: 75px;
+  z-index: 20;
+  box-shadow: var(--right-shadow);
+  @apply px-4 py-6 h-screen flex flex-col items-center;
+}

src/components/builder/right/RightSidebar.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Profile from "../sections/Profile";
+import RightNavbar from "./RightNavbar";
+import styles from "./RightSidebar.module.css";
+
+const RightSidebar = () => {
+  return (
+    <div className="flex">
+      <div className={styles.container}>
+        <Profile />
+      </div>
+
+      <RightNavbar />
+    </div>
+  );
+};
+
+export default RightSidebar;

src/components/builder/right/RightSidebar.module.css

@@ -0,0 +1,5 @@
+.container {
+  z-index: 10;
+  box-shadow: var(--right-shadow);
+  @apply w-full h-screen p-8;
+}

src/components/builder/sections/Profile.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { MdFileUpload } from "react-icons/md";
+import Heading from "../../shared/Heading";
+import Input from "../../shared/Input";
+import styles from "./Profile.module.css";
+
+const Profile = () => {
+  return (
+    <section>
+      <Heading>Profile</Heading>
+      <div className="flex items-center">
+        <div className={styles.circle}>
+          <MdFileUpload size="22px" className="text-secondary-dark" />
+        </div>
+
+        <Input label="Photograph" className="ml-6" path="profile.photograph" />
+      </div>
+
+      <div className="grid grid-cols-2 gap-8">
+        <Input label="First Name" path="profile.firstName" />
+        <Input label="Last Name" path="profile.lastName" />
+      </div>
+    </section>
+  );
+};
+
+export default Profile;

src/components/builder/sections/Profile.module.css

@@ -0,0 +1,6 @@
+.circle {
+  width: 60px;
+  height: 60px;
+  flex: 0 0 60px;
+  @apply flex items-center justify-center bg-secondary rounded-full;
+}