Ability to clone Elements

frontend/src/editor.jsx

@@ -46,6 +46,8 @@ const dashboardReducer = (state, action) => {
 			};
 		case 'deleteElement':
 			console.log('Deleting element')
+		case 'duplicateElement':
+			console.log('Duplicating element')	
 		case 'updateElement':
 			console.log('Updating element')
 			const newState = {...state};
@@ -378,6 +380,15 @@ function SidePanelElements({dashboard, dashboardDispatch, setHighlightedElementI
 		});
 	};
 
+	const duplicateElement = (e, index) => {
+		e.preventDefault();
+		let elements = dashboard.elements;
+		elements.splice(index, 0, elements[index])
+		dashboardDispatch({
+			type: 'duplicateElement',
+		});
+	};
+	
 	const handleDragStart = e => {
 		e.dataTransfer.setData("source-id", e.target.id);
 	}
@@ -400,6 +411,7 @@ function SidePanelElements({dashboard, dashboardDispatch, setHighlightedElementI
 				<div class="element-title">{element.title}</div>
 			</div>
 				<button onClick={e => deleteElement(e,index)}>Delete</button>
+				<button onClick={e => duplicateElement(e,index)}>Duplicate</button>
 			<div class="drop-zone" onDrop={handleDrop} id={index}
 				 				   onDragEnter={e => {e.preventDefault(); e.currentTarget.classList.add('active')}}
 				 				   onDragOver={e => e.preventDefault()}

frontend/style.css

@@ -178,7 +178,7 @@ label~input, label~select, label~textarea {
 	margin-bottom: 15px;
 }
 .element-title {
-	display: inline-block;
+	/* display: inline-block; */
 	padding-right: 6em;
 }
 
@@ -190,6 +190,8 @@ button {
 	padding: 10px 20px;
 	font-size: 16px;
 	color: var(--color-white);
+	margin-right: 5px;
+	display: inline-block;
 }
 
 button:hover, button:focus {