implement reorder/moving of sections between blocks

src/components/builder/center/Artboard.js

@@ -1,8 +1,23 @@
-import React from "react";
+import React, { useContext } from "react";
+import TemplateContext from "../../../contexts/TemplateContext";
 import styles from "./Artboard.module.css";
 
 const Artboard = () => {
-  return <div className={styles.container}></div>;
+  const { blocks } = useContext(TemplateContext);
+
+  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>
+  );
 };
 
 export default Artboard;

src/components/builder/right/RightSidebar.js

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

src/components/builder/sections/Layout.js

@@ -0,0 +1,63 @@
+import cx from "classnames";
+import React, { useContext } from "react";
+import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
+import TemplateContext from "../../../contexts/TemplateContext";
+import Heading from "../../shared/Heading";
+import styles from "./Layout.module.css";
+
+const Layout = () => {
+  const { blocks, onDragEnd } = useContext(TemplateContext);
+
+  return (
+    <section>
+      <Heading>Layout</Heading>
+
+      <p>
+        This template supports {blocks.length} blocks. You can re-order or move
+        sections by dragging/dropping the section names across lists.
+      </p>
+
+      <div className={`grid gap-8 grid-cols-${blocks.length}`}>
+        <DragDropContext onDragEnd={onDragEnd}>
+          {blocks.map((el, ind) => (
+            <Droppable key={ind} droppableId={`${ind}`}>
+              {(provided, snapshot) => (
+                <div
+                  ref={provided.innerRef}
+                  className={cx(styles.droppable, {
+                    [styles.draggingOver]: snapshot.isDraggingOver,
+                  })}
+                  {...provided.droppableProps}
+                >
+                  <div className="grid gap-3">
+                    {el.map((item, index) => (
+                      <Draggable
+                        key={item.id}
+                        draggableId={item.id}
+                        index={index}
+                      >
+                        {(provided) => (
+                          <div
+                            ref={provided.innerRef}
+                            className={styles.draggable}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                          >
+                            {item.name}
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                  </div>
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          ))}
+        </DragDropContext>
+      </div>
+    </section>
+  );
+};
+
+export default Layout;

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

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