diff --git a/src/components/builder/sections/Layout.js b/src/components/builder/sections/Layout.js
new file mode 100644
index 00000000..86522975
--- /dev/null
+++ b/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 (
+
+ Layout
+
+
+ This template supports {blocks.length} blocks. You can re-order or move
+ sections by dragging/dropping the section names across lists.
+
+
+
+
+ {blocks.map((el, ind) => (
+
+ {(provided, snapshot) => (
+
+
+ {el.map((item, index) => (
+
+ {(provided) => (
+
+ {item.name}
+
+ )}
+
+ ))}
+
+ {provided.placeholder}
+
+
+ );
+};
+
+export default Layout;
diff --git a/src/components/builder/sections/Layout.module.css b/src/components/builder/sections/Layout.module.css
new file mode 100644
index 00000000..b7bf2f87
--- /dev/null
+++ b/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;
+}
diff --git a/src/contexts/TemplateContext.js b/src/contexts/TemplateContext.js
new file mode 100644
index 00000000..addcff56
--- /dev/null
+++ b/src/contexts/TemplateContext.js
@@ -0,0 +1,88 @@
+import React, { createContext, useState } from "react";
+
+const defaultState = {
+ selected: "Pikachu",
+ setSelected: () => {},
+ blocks: [
+ [
+ { id: "1", name: "Profile" },
+ { id: "2", name: "Work" },
+ ],
+ [
+ { id: "3", name: "Education" },
+ { id: "4", name: "Skills" },
+ { id: "5", name: "Hobbies" },
+ ],
+ ],
+ setBlocks: () => {},
+};
+
+const TemplateContext = createContext(defaultState);
+
+const TemplateProvider = ({ children }) => {
+ const [selected, setSelected] = useState(defaultState.selected);
+ const [blocks, setBlocks] = useState(defaultState.blocks);
+
+ const reorder = (list, startIndex, endIndex) => {
+ const result = Array.from(list);
+ const [removed] = result.splice(startIndex, 1);
+ result.splice(endIndex, 0, removed);
+
+ return result;
+ };
+
+ const move = (source, destination, droppableSource, droppableDestination) => {
+ const sourceClone = Array.from(source);
+ const destClone = Array.from(destination);
+ const [removed] = sourceClone.splice(droppableSource.index, 1);
+
+ destClone.splice(droppableDestination.index, 0, removed);
+
+ const result = {};
+ result[droppableSource.droppableId] = sourceClone;
+ result[droppableDestination.droppableId] = destClone;
+
+ return result;
+ };
+
+ const onDragEnd = (result) => {
+ const { source, destination } = result;
+
+ if (!destination) {
+ return;
+ }
+ const sInd = +source.droppableId;
+ const dInd = +destination.droppableId;
+
+ if (sInd === dInd) {
+ const items = reorder(blocks[sInd], source.index, destination.index);
+ const newState = [...blocks];
+ newState[sInd] = items;
+ setBlocks(newState);
+ } else {
+ const result = move(blocks[sInd], blocks[dInd], source, destination);
+ const newState = [...blocks];
+ newState[sInd] = result[sInd];
+ newState[dInd] = result[dInd];
+ setBlocks(newState);
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default TemplateContext;
+
+export { TemplateProvider };