feat(Editor): Initially replace the footer section

Author: YektaDev

src/components/ButtonGroup.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { buttonStyle, outlineButtonStyle } from "./styles.ts";
+
+const activeStyle = "px-4 py-2 " + buttonStyle;
+const inactiveStyle = "px-4 py-2 " + outlineButtonStyle;
+const ButtonGroup: React.FC = () => {
+  const [activeButton, setActiveButton] = useState("Nothing");
+
+  const handleButtonClick = (buttonName: string) => {
+    setActiveButton(buttonName);
+  };
+
+  return (
+    <div className="flex gap-2 text-xs">
+      <button
+        className={activeButton === "Nothing" ? activeStyle : inactiveStyle}
+        onClick={() => handleButtonClick("Nothing")}
+      >
+        Nothing
+      </button>
+      <button
+        className={activeButton === "Text/HTML" ? activeStyle : inactiveStyle}
+        onClick={() => handleButtonClick("Text/HTML")}
+      >
+        Text / HTML
+      </button>
+      <button
+        className={activeButton === "Image" ? activeStyle : inactiveStyle}
+        onClick={() => handleButtonClick("Image")}
+      >
+        Image
+      </button>
+    </div>
+  );
+};
+
+export default ButtonGroup;

src/components/Editor.tsx

@@ -10,8 +10,8 @@ import DraggableItem from "./DraggableItem";
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-css";
 import "ace-builds/src-noconflict/ext-language_tools";
-import fieldStyle from "./fieldStyle.ts";
 import { buttonIconClasses, buttonStyle, fieldStyle, outlineButtonStyle } from "./styles.ts";
+import ButtonGroup from "./ButtonGroup.tsx";
 
 const { emailHtml } = yekaEmailHtmlLib.dev.yekta.yeka.email.html;
 
@@ -350,49 +350,13 @@ const App: React.FC = () => {
 
         <div className="mb-6">
           <h2 className="mb-2 text-xl font-semibold text-primary-900">Footer</h2>
-          <div className="mb-4">
-            <h3 className="mb-2 font-semibold text-primary-800">Top Row</h3>
-            <AddButton
-              html={"Raw HTML"}
-              onClick={() =>
-                addFunction(setFooterTopRowFunctions, {
-                  type: "raw",
-                  html: "<div>Top Row Content</div>",
-                })
-              }
-            />
-            <AddButton
-              html={"Primary Button"}
-              onClick={() =>
-                addFunction(setFooterTopRowFunctions, {
-                  type: "primaryButton",
-                  label: "Click Me",
-                  href: "https://example.com",
-                })
-              }
-            />
+          <div className="mb-4 flex items-center">
+            <h3 className="me-4 font-semibold text-primary-800">Top Row</h3>
+            <ButtonGroup />
           </div>
-          <div className="mb-4">
-            <h3 className="mb-2 font-semibold text-primary-800">Bottom Row</h3>
-            <AddButton
-              html={"Raw HTML"}
-              onClick={() =>
-                addFunction(setFooterBottomRowFunctions, {
-                  type: "raw",
-                  html: "<div>Top Row Content</div>",
-                })
-              }
-            />
-            <AddButton
-              html={"Primary Button"}
-              onClick={() =>
-                addFunction(setFooterBottomRowFunctions, {
-                  type: "primaryButton",
-                  label: "Click Me",
-                  href: "https://example.com",
-                })
-              }
-            />
+          <div className="mb-4 flex items-center">
+            <h3 className="me-4 font-semibold text-primary-800">Bottom Row</h3>
+            <ButtonGroup />
           </div>
         </div>