- recreating onyx template

- profile section complete

src/components/builder/center/Artboard.js

@@ -1,21 +1,16 @@
 import React, { useContext } from "react";
+import ResumeContext from "../../../contexts/ResumeContext";
 import TemplateContext from "../../../contexts/TemplateContext";
+import Onyx from "../../../templates/Onyx";
 import styles from "./Artboard.module.css";
 
 const Artboard = () => {
-  const { blocks } = useContext(TemplateContext);
+  const { blocks, colors } = useContext(TemplateContext);
+  const { state } = useContext(ResumeContext);
 
   return (
-    <div className={styles.container}>
-      <div className={`grid gap-8 grid-cols-${blocks.length}`}>
-        {blocks.map((block, ind) => (
-          <div key={ind} className="col-span-1">
-            {block.map((x) => (
-              <div key={x.id}>{x.name}</div>
-            ))}
-          </div>
-        ))}
-      </div>
+    <div id="artboard" className={styles.container}>
+      <Onyx data={state} layout={blocks} colors={colors} />
     </div>
   );
 };

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

@@ -1,6 +1,7 @@
 .container {
-  width: 400px;
-  height: 600px;
+  width: 210mm;
+  height: 297mm;
+  zoom: 0.8;
   box-shadow: var(--shadow);
   @apply bg-white;
 }

src/components/builder/sections/Layout.js

@@ -1,4 +1,3 @@
-import cx from "classnames";
 import React, { useContext } from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import TemplateContext from "../../../contexts/TemplateContext";
@@ -21,21 +20,18 @@ const Layout = () => {
         <DragDropContext onDragEnd={onDragEnd}>
           {blocks.map((el, ind) => (
             <Droppable key={ind} droppableId={`${ind}`}>
-              {(provided, snapshot) => (
+              {(provided) => (
                 <div
                   ref={provided.innerRef}
-                  className={cx(styles.droppable, {
-                    [styles.draggingOver]: snapshot.isDraggingOver,
-                  })}
+                  className={styles.droppable}
                   {...provided.droppableProps}
                 >
                   <div className="grid gap-3">
+                    <span className="uppercase font-semibold text-xs">
+                      Block {ind + 1}
+                    </span>
                     {el.map((item, index) => (
-                      <Draggable
-                        key={item.id}
-                        draggableId={item.id}
-                        index={index}
-                      >
+                      <Draggable key={item} draggableId={item} index={index}>
                         {(provided) => (
                           <div
                             ref={provided.innerRef}
@@ -43,7 +39,7 @@ const Layout = () => {
                             {...provided.draggableProps}
                             {...provided.dragHandleProps}
                           >
-                            {item.name}
+                            {item}
                           </div>
                         )}
                       </Draggable>

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

@@ -1,11 +1,7 @@
 .droppable {
-  @apply px-4 py-6 bg-gray-100 col-span-1 rounded;
-}
-
-.droppable.dragging-over {
-  @apply bg-gray-200;
+  @apply p-6 bg-secondary-light col-span-1 rounded;
 }
 
 .draggable {
-  @apply px-4 py-2 font-medium rounded bg-gray-300;
+  @apply px-4 py-2 capitalize font-medium rounded bg-secondary;
 }

src/components/builder/sections/Profile.js

@@ -10,16 +10,34 @@ const Profile = () => {
       <Heading>Profile</Heading>
       <div className="flex items-center">
         <div className={styles.circle}>
-          <MdFileUpload size="22px" className="text-secondary-dark" />
+          <MdFileUpload size="22px" />
         </div>
 
         <Input label="Photograph" className="ml-6" path="profile.photograph" />
       </div>
 
-      <div className="grid grid-cols-2 gap-8">
+      <div className="grid grid-cols-2 gap-6">
         <Input label="First Name" path="profile.firstName" />
         <Input label="Last Name" path="profile.lastName" />
       </div>
+
+      <Input label="Subtitle" path="profile.subtitle" />
+
+      <hr />
+
+      <Input label="Address Line 1" path="profile.address.line1" />
+      <Input label="Address Line 2" path="profile.address.line2" />
+
+      <div className="grid grid-cols-2 gap-6">
+        <Input label="City" path="profile.address.city" />
+        <Input label="Pincode" path="profile.address.pincode" />
+      </div>
+
+      <hr />
+
+      <Input label="Phone Number" path="profile.phone" />
+      <Input label="Website" path="profile.website" />
+      <Input label="Email Address" path="profile.email" />
     </section>
   );
 };

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

@@ -2,5 +2,5 @@
   width: 60px;
   height: 60px;
   flex: 0 0 60px;
-  @apply flex items-center justify-center bg-secondary rounded-full;
+  @apply flex items-center justify-center bg-secondary text-secondary-dark rounded-full;
 }