@markopolo_ai_inc/markopolo-email-editor 1.0.3

package/src/components/EmailEditor/components/StyleSettings/ImageStyleSettings.js

@@ -0,0 +1,217 @@
+import { useContext, useRef } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { Switch, Slider, Input } from "antd";
+import { deepClone } from "../../utils/helpers";
+import PaddingSettings from "./PaddingSettings";
+import useLayout from "../../utils/useStyleLayout";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAlignCenter, faAlignLeft, faAlignRight, faAlignJustify, faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons";
+import useTranslation from "../../translation";
+
+const ImageStyleSettings = () => {
+  const { currentItem, previewMode } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { findStyleItem, cardItemElement, inputChange, updateItemStyles } = useLayout();
+  const fileInputRef = useRef(null);
+
+  const actionSettings = () => {
+    const { linkURL } = currentItem.data;
+
+    const linkChange = (event) => {
+      const newValue = event.target.value;
+      const newCurrentItem = deepClone(currentItem);
+      currentItem.data.linkURL = newValue;
+
+      updateItemStyles(newCurrentItem.data);
+    };
+
+    return (
+      <>
+        <div className="right-setting-block-item-title">{t("image_action")}</div>
+        {cardItemElement(t("action_type"), <div className="link-tag">{t("link")}</div>)}
+        <div className="card-item-title">{t("link_url")}</div>
+        <div className="margin-top-6">
+          <Input addonBefore="https://" value={linkURL} onChange={linkChange} />
+        </div>
+      </>
+    );
+  };
+
+  const imageSettings = () => {
+    const { src, alt } = currentItem.data;
+
+    const linkChange = (key) => (event) => {
+      const newCurrentItem = deepClone(currentItem);
+      newCurrentItem.data[key] = event.target.value;
+      updateItemStyles(newCurrentItem.data);
+    };
+
+    // Reserved for future upload: call with uploaded URL when implementing S3 upload
+    // eslint-disable-next-line no-unused-vars
+    const setImageSrc = (url) => {
+      const newCurrentItem = deepClone(currentItem);
+      newCurrentItem.data.src = url;
+      updateItemStyles(newCurrentItem.data);
+    };
+
+    const handleUploadClick = () => {
+      fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      // Future: upload file to S3, then call setImageSrc(returnedUrl)
+      // setImageSrc(await uploadToS3(file));
+      e.target.value = "";
+    };
+
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const file = e.dataTransfer?.files?.[0];
+      if (file?.type?.startsWith("image/")) {
+        // Future: upload file to S3, then call setImageSrc(returnedUrl)
+        // setImageSrc(await uploadToS3(file));
+      }
+      fileInputRef.current.value = "";
+    };
+
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    return (
+      <>
+        <div className="right-setting-block-item-title">{t("image_settings")}</div>
+        {/* Upload drop box – future: upload to S3 and set returned URL into image link */}
+        <div className="card-item">
+          <div className="width-full">
+            <div className="card-item-title">{t("image_upload")}</div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              className="ee-image-upload-input-hidden"
+              onChange={handleFileChange}
+            />
+            <div
+              role="button"
+              tabIndex={0}
+              className="ee-image-upload-trigger"
+              onClick={handleUploadClick}
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+            >
+              <FontAwesomeIcon icon={faCloudUploadAlt} className="ee-image-upload-icon" />
+              <span>{t("image_upload_click")}</span>
+            </div>
+          </div>
+        </div>
+        {/* Image link – paste URL here or filled by upload (S3 URL) when implemented */}
+        <div className="card-item">
+          <div className="width-full">
+            <div className="card-item-title">{t("image_url")}</div>
+            <div className="margin-top-6">
+              <Input
+                value={src || ""}
+                onChange={linkChange("src")}
+                placeholder="https://..."
+              />
+            </div>
+          </div>
+        </div>
+        <div className="card-item">
+          <div className="width-full">
+            <div className="card-item-title">{t("image_alt")}</div>
+            <div className="margin-top-6">
+              <Input value={alt || ""} onChange={linkChange("alt")} />
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const updateContentStylesPadding = (padding) => {
+    const newData = deepClone(currentItem.data);
+    newData.contentStyles[previewMode] = {
+      ...newData.contentStyles[previewMode],
+      ...padding,
+    };
+    updateItemStyles(newData);
+  };
+
+  const updateContentTextAlign = (textAlign) => {
+    const newData = deepClone(currentItem.data);
+    newData.contentStyles[previewMode] = {
+      ...newData.contentStyles[previewMode],
+      textAlign,
+    };
+    updateItemStyles(newData);
+  };
+
+  const imageStyleSettings = () => {
+    const width = findStyleItem(currentItem.data.styles, "width");
+    const textAlign = findStyleItem(currentItem.data.contentStyles, "textAlign");
+    return (
+      <>
+        <div className="right-setting-block-item-title">{t("image_styles")}</div>
+        {cardItemElement(
+          t("width_auto"),
+          <Switch
+            checked={width === "auto"}
+            className={classNames(width === "auto" ? "bg-sky-500" : "bg-gray-400")}
+            onChange={() => {
+              const value = width === "auto" ? "100%" : "auto";
+              inputChange("width")(value);
+            }}
+          />
+        )}
+        {width !== "auto" && <Slider value={Number(width.replace("%", ""))} onChange={(value) => inputChange("width")(value + "%")} />}
+        {cardItemElement(
+          t("align"),
+          <div className="flex justify-center items-center">
+            {[
+              { icon: faAlignLeft, value: "left" },
+              { icon: faAlignCenter, value: "center" },
+              { icon: faAlignRight, value: "right" },
+              { icon: faAlignJustify, value: "justify" },
+            ].map(({ icon, value }) => {
+              return (
+                <div
+                  key={value}
+                  className={classNames(textAlign === value ? "align-style-item-active" : "align-style-item-un_active", "align-style-item")}
+                  onClick={() => updateContentTextAlign(value)}
+                >
+                  <FontAwesomeIcon icon={icon} className="tag-style-size" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <div className="card-item-title">{t("padding_settings")}</div>
+        <PaddingSettings
+          padding={{
+            paddingTop: findStyleItem(currentItem.data.contentStyles, "paddingTop"),
+            paddingRight: findStyleItem(currentItem.data.contentStyles, "paddingRight"),
+            paddingLeft: findStyleItem(currentItem.data.contentStyles, "paddingLeft"),
+            paddingBottom: findStyleItem(currentItem.data.contentStyles, "paddingBottom"),
+          }}
+          setPadding={updateContentStylesPadding}
+        />
+      </>
+    );
+  };
+  return (
+    <div className="margin-y-30">
+      {actionSettings()}
+      {imageSettings()}
+      {imageStyleSettings()}
+    </div>
+  );
+};
+
+export default ImageStyleSettings;

package/src/components/EmailEditor/components/StyleSettings/MenuStyleSettings.js

@@ -0,0 +1,177 @@
+import { useContext, useCallback, useRef, useState } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { Input, InputNumber, Select } from "antd";
+import { throttle, deepClone } from "../../utils/helpers";
+import ColorPicker from "../ColorPicker";
+import PaddingSettings from "./PaddingSettings";
+import useLayout from "../../utils/useStyleLayout";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrash, faGripVertical, faAlignCenter, faAlignLeft, faAlignRight } from "@fortawesome/free-solid-svg-icons";
+import useTranslation from "../../translation";
+
+const MenuStyleSettings = () => {
+  const { currentItem, previewMode } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { findStyleItem, paddingChange, updateItemStyles, cardItemElement, colorChange, inputChange } = useLayout();
+
+  const { list = [], separator = " | " } = currentItem.data;
+  const [sourceNode, setSourceNode] = useState(null);
+  const [isDragStart, setIsDragStart] = useState(false);
+  const [dragIndex, setDragIndex] = useState(null);
+  const menuListsRef = useRef(null);
+
+  const updateMenuSettings = (key, value) => {
+    const newData = deepClone(currentItem.data);
+    newData[key] = value;
+    updateItemStyles(newData);
+  };
+
+  const contentPaddingChange = (padding) => {
+    const newData = deepClone(currentItem.data);
+    newData.contentStyles[previewMode] = {
+      ...newData.contentStyles[previewMode],
+      ...padding,
+    };
+    updateItemStyles(newData);
+  };
+
+  const updateContentTextAlign = (textAlign) => {
+    const newData = deepClone(currentItem.data);
+    newData.contentStyles[previewMode] = {
+      ...newData.contentStyles[previewMode],
+      textAlign,
+    };
+    updateItemStyles(newData);
+  };
+
+  // throttle() returns a new function reference
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const dragOver = useCallback(
+    throttle((event) => {
+      event.preventDefault();
+      const listsDom = menuListsRef.current;
+      if (!listsDom) return;
+      const overEl = event.target.closest("[data-index]");
+      if (!overEl) return;
+      const children = Array.from(listsDom.children);
+      const overIndex = children.indexOf(overEl);
+      if (overIndex === -1) return;
+      const sourceIndex = parseInt(dragIndex, 10);
+      if (sourceIndex === overIndex) return;
+      const newList = deepClone(list);
+      [newList[overIndex], newList[sourceIndex]] = [newList[sourceIndex], newList[overIndex]];
+      setDragIndex(String(overIndex));
+      updateMenuSettings("list", newList);
+    }, 50),
+    [list, dragIndex]
+  );
+
+  const fontFamilyList = ["sans-serif", "Arial", "Verdana", "Times New Roman", "Georgia", "Courier New"];
+  const targetOptions = [
+    { label: t("same_tab"), value: "_self" },
+    { label: t("new_tab"), value: "_blank" },
+  ];
+
+  return (
+    <div className="margin-y-30">
+      <div className="right-setting-block-item-title">{t("menu_items")}</div>
+      <div
+        ref={menuListsRef}
+        onDragOver={dragOver}
+        className="margin-top-12"
+        onDragStart={(e) => {
+          const row = e.target.closest("[data-index]");
+          const idx = row?.getAttribute("data-index");
+          if (idx != null) {
+            row.classList.add("social-link-item-current");
+            setSourceNode(row);
+            setIsDragStart(true);
+            setDragIndex(idx);
+          }
+        }}
+        onDragEnd={() => {
+          const node = sourceNode?.closest?.("[data-index]");
+          if (node) node.classList.remove("social-link-item-current");
+          setSourceNode(null);
+          setIsDragStart(false);
+          setDragIndex(null);
+        }}
+      >
+        {list.map((item, index) => (
+          <div
+            key={index}
+            data-index={index}
+            draggable
+            className={classNames(
+              "social-link-item",
+              isDragStart && "social-link-item-drag_start",
+              dragIndex === String(index) ? "social-link-item-current" : "border-transparent"
+            )}
+          >
+            <div className="social-link-item-content">
+              <div className="flex items-center justify-between margin-bottom-8">
+                <div className="flex items-center gap-2 cursor-grab">
+                  <FontAwesomeIcon icon={faGripVertical} className="tag-style-size" />
+                  <span className="font-semibold">{t("menu_item")} {index + 1}</span>
+                </div>
+                <div
+                  className="social-link-item-icon social-link-item-icon-slate"
+                  onClick={() => updateMenuSettings("list", list.filter((_, i) => i !== index))}
+                >
+                  <FontAwesomeIcon icon={faTrash} className="social-link-item-icon-svg social-link-item-icon-svg-deep" />
+                </div>
+              </div>
+              {cardItemElement(t("label"), <Input value={item.label || ""} onChange={(e) => updateMenuSettings("list", list.map((it, i) => (i === index ? { ...it, label: e.target.value } : it)))} placeholder="Page" />)}
+              {cardItemElement(
+                t("url"),
+                <Input addonBefore="https://" value={(item.url || "").replace(/^https?:\/\//, "")} onChange={(e) => updateMenuSettings("list", list.map((it, i) => (i === index ? { ...it, url: e.target.value } : it)))} placeholder="example.com" />
+              )}
+              {cardItemElement(
+                t("target"),
+                <Select className="input-width" value={item.target || "_self"} onChange={(v) => updateMenuSettings("list", list.map((it, i) => (i === index ? { ...it, target: v } : it)))} getPopupContainer={() => document.querySelector(".right-settings") || document.body}>
+                  {targetOptions.map((opt) => (
+                    <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
+                  ))}
+                </Select>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+      <button type="button" className="menu-add-new-item margin-top-12" onClick={() => updateMenuSettings("list", list.concat({ label: t("page"), url: "", target: "_self" }))}>
+        <span className="menu-add-new-item-icon">+</span> {t("add_new_item")}
+      </button>
+
+      <div className="right-setting-block-item-title margin-top-18">{t("menu_styles")}</div>
+      {cardItemElement(t("font_family"), <Select className="input-width" value={findStyleItem(currentItem.data.styles, "fontFamily")} onChange={inputChange("fontFamily")} getPopupContainer={() => document.querySelector(".right-settings") || document.body}>{fontFamilyList.map((f) => (<Select.Option key={f} value={f}>{f}</Select.Option>))}</Select>)}
+      {cardItemElement(t("font_size"), <InputNumber min={8} max={72} className="input-width" addonAfter="px" value={findStyleItem(currentItem.data.styles, "fontSize")} onChange={inputChange("fontSize")} />)}
+      {cardItemElement(t("letter_spacing"), <InputNumber className="input-width" addonAfter="px" value={findStyleItem(currentItem.data.styles, "letterSpacing")} onChange={inputChange("letterSpacing")} />)}
+      {cardItemElement(t("text_color"), <ColorPicker color={findStyleItem(currentItem.data.styles, "color")} setColor={colorChange("color")} />)}
+      {cardItemElement(t("link_color"), <ColorPicker color={findStyleItem(currentItem.data.styles, "linkColor")} setColor={colorChange("linkColor")} />)}
+      {cardItemElement(
+        t("align"),
+        <div className="flex justify-center items-center">
+          {[
+            { icon: faAlignLeft, value: "left" },
+            { icon: faAlignCenter, value: "center" },
+            { icon: faAlignRight, value: "right" },
+          ].map(({ icon, value }) => (
+            <div key={value} className={classNames(findStyleItem(currentItem.data.contentStyles, "textAlign") === value ? "align-style-item-active" : "align-style-item-un_active", "align-style-item")} onClick={() => updateContentTextAlign(value)}>
+              <FontAwesomeIcon icon={icon} className="tag-style-size" />
+            </div>
+          ))}
+        </div>
+      )}
+      {cardItemElement(t("separator"), <Input value={separator} onChange={(e) => updateMenuSettings("separator", e.target.value)} placeholder=" | " />)}
+
+      <div className="right-setting-block-item-title margin-top-18">{t("padding_settings")}</div>
+      <PaddingSettings padding={{ paddingTop: findStyleItem(currentItem.data.contentStyles, "paddingTop"), paddingRight: findStyleItem(currentItem.data.contentStyles, "paddingRight"), paddingLeft: findStyleItem(currentItem.data.contentStyles, "paddingLeft"), paddingBottom: findStyleItem(currentItem.data.contentStyles, "paddingBottom") }} setPadding={contentPaddingChange} />
+
+      <div className="card-item-title margin-top-18">{t("spacing")}</div>
+      <PaddingSettings padding={{ paddingTop: findStyleItem(currentItem.data.styles, "paddingTop"), paddingRight: findStyleItem(currentItem.data.styles, "paddingRight"), paddingLeft: findStyleItem(currentItem.data.styles, "paddingLeft"), paddingBottom: findStyleItem(currentItem.data.styles, "paddingBottom") }} setPadding={paddingChange} />
+    </div>
+  );
+};
+
+export default MenuStyleSettings;

package/src/components/EmailEditor/components/StyleSettings/PaddingSettings.js

@@ -0,0 +1,30 @@
+import { InputNumber } from "antd";
+import useTranslation from "../../translation";
+
+const PaddingSettings = ({ padding, setPadding }) => {
+  const { t } = useTranslation();
+  const paddingChange = (key) => (value) => {
+    const newPadding = { ...padding, [key]: value };
+    setPadding(newPadding);
+  };
+  return (
+    <div className="padding-settings">
+      {[
+        { name: t("top"), value: "paddingTop" },
+        { name: t("right"), value: "paddingRight" },
+        { name: t("left"), value: "paddingLeft" },
+        { name: t("bottom"), value: "paddingBottom" },
+      ].map(({ name, value }) => {
+        const style = padding[value];
+        return (
+          <div key={value}>
+            <div>{name}</div>
+            <InputNumber className="width-full" addonAfter="px" min={0} value={style} onChange={paddingChange(value)} />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PaddingSettings;

package/src/components/EmailEditor/components/StyleSettings/SocialLinkSettings.js

@@ -0,0 +1,250 @@
+import { useContext, useCallback, useRef, useState } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { Input, InputNumber } from "antd";
+import { throttle, deepClone } from "../../utils/helpers";
+import PaddingSettings from "./PaddingSettings";
+import useLayout from "../../utils/useStyleLayout";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrash, faAlignCenter, faAlignLeft, faAlignRight, faAlignJustify } from "@fortawesome/free-solid-svg-icons";
+import useTranslation from "../../translation";
+
+const SOCIAL_ICON_CDN = "https://s.magecdn.com/social";
+
+const SocialLinkSettings = () => {
+  const { currentItem, previewMode } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { findStyleItem, paddingChange, updateItemStyles, cardItemElement } = useLayout();
+
+  const { list } = currentItem.data;
+  const [sourceNode, setSourceNode] = useState(null);
+  const [isDragStart, setIsDragStart] = useState(false);
+  const [dragIndex, setDragIndex] = useState(null);
+  const socialLists = useRef(null);
+
+  const socialList = [
+    { image: `${SOCIAL_ICON_CDN}/tc-facebook.svg`, title: "Facebook", linkURL: "" },
+    { image: `${SOCIAL_ICON_CDN}/tc-github.svg`, title: "Github", linkURL: "" },
+    { image: `${SOCIAL_ICON_CDN}/tc-linkedin.svg`, title: "LinkedIn", linkURL: "" },
+    { image: `${SOCIAL_ICON_CDN}/tc-instagram.svg`, title: "Instagram", linkURL: "" },
+    { image: `${SOCIAL_ICON_CDN}/tc-tiktok.svg`, title: "TikTok", linkURL: "" },
+    { image: `${SOCIAL_ICON_CDN}/tc-x.svg`, title: "Twitter", linkURL: "" },
+    { image: `${SOCIAL_ICON_CDN}/tc-youtube.svg`, title: "YouTube", linkURL: "" },
+  ];
+
+  const updateSocialSettings = (key, value) => {
+    const newCurrentItem = deepClone(currentItem);
+    newCurrentItem.data = {
+      ...newCurrentItem.data,
+      [key]: value,
+    };
+    updateItemStyles(newCurrentItem.data);
+  };
+
+  // throttle() returns a new function reference
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const dragOver = useCallback(
+    throttle((event) => {
+      event.preventDefault();
+      const listsDom = socialLists.current;
+      const children = Array.from(listsDom.childNodes);
+      const overIndex = children.indexOf(event.target);
+
+      if (overIndex === -1) return;
+      const sourceIndex = dragIndex;
+      const newSocialLists = deepClone(list);
+      if (sourceIndex === overIndex) {
+        return;
+      }
+
+      [newSocialLists[overIndex], newSocialLists[sourceIndex]] = [newSocialLists[sourceIndex], newSocialLists[overIndex]];
+      setDragIndex(overIndex);
+      updateSocialSettings("list", newSocialLists);
+    }, 50),
+    [sourceNode, dragIndex]
+  );
+
+  const contentPaddingChange = (padding) => {
+    const newData = deepClone(currentItem.data);
+    newData.contentStyles[previewMode] = {
+      ...newData.contentStyles[previewMode],
+      ...padding,
+    };
+    updateItemStyles(newData);
+  };
+
+  const updateContentTextAlign = (textAlign) => {
+    const newData = deepClone(currentItem.data);
+    newData.contentStyles[previewMode] = {
+      ...newData.contentStyles[previewMode],
+      textAlign,
+    };
+    updateItemStyles(newData);
+  };
+
+  const imageWidthChange = (value) => {
+    const newData = deepClone(currentItem.data);
+    newData.imageWidth = value;
+    updateItemStyles(newData);
+  };
+
+  const PaddingStylesElement = () => {
+    return (
+      <>
+        <div className="right-setting-block-item-title"> {t("padding_settings")}</div>
+        <PaddingSettings
+          padding={{
+            paddingTop: findStyleItem(currentItem.data.contentStyles, "paddingTop"),
+            paddingRight: findStyleItem(currentItem.data.contentStyles, "paddingRight"),
+            paddingLeft: findStyleItem(currentItem.data.contentStyles, "paddingLeft"),
+            paddingBottom: findStyleItem(currentItem.data.contentStyles, "paddingBottom"),
+          }}
+          setPadding={contentPaddingChange}
+        />
+      </>
+    );
+  };
+
+  const socialLinkLayoutElement = () => {
+    const textAlign = findStyleItem(currentItem.data.contentStyles, "textAlign");
+    const width = currentItem.data.imageWidth;
+    return (
+      <>
+        <div className="right-setting-block-item-title"> {t("social_link_settings")}</div>
+        {cardItemElement(
+          t("align"),
+          <div className="flex justify-center items-center">
+            {[
+              { icon: faAlignLeft, value: "left" },
+              { icon: faAlignCenter, value: "center" },
+              { icon: faAlignRight, value: "right" },
+              { icon: faAlignJustify, value: "justify" },
+            ].map(({ icon, value }) => {
+              return (
+                <div
+                  key={value}
+                  className={classNames(textAlign === value ? "align-style-item-active" : "align-style-item-un_active", "align-style-item")}
+                  onClick={() => updateContentTextAlign(value)}
+                >
+                  <FontAwesomeIcon icon={icon} className="tag-style-size" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {cardItemElement(
+          t("social_link_size"),
+          <InputNumber min={0} className="input-width" addonAfter="px" value={width} onChange={imageWidthChange} />
+        )}
+        <div className="card-item-title margin-top-18">{t("social_links")}</div>
+        <div
+          ref={socialLists}
+          onDragOver={dragOver}
+          className="margin-top-12"
+          onDragStart={(event) => {
+            setSourceNode(event.target);
+            setIsDragStart(true);
+            setDragIndex(event.target.dataset.index);
+            }}
+          onDragEnd={() => {
+            sourceNode.childNodes[0].classList.remove("social-link-item-current");
+            setSourceNode(null);
+            setIsDragStart(false);
+            setDragIndex(null);
+          }}
+        >
+          {list.map((item, index) => {
+            const { image, title, linkURL } = item;
+            return (
+              <div
+                key={index}
+                data-index={index}
+                draggable
+                className={classNames(
+                  "social-link-item",
+                  "cursor-grab",
+                  isDragStart && "social-link-item-drag_start",
+                  dragIndex === index ? "social-link-item-current" : "border-transparent"
+                )}
+              >
+                <div className="social-link-item-content">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center">
+                      <img src={image} alt={title} className="social-link-item-img" />
+                      <div className="font-semibold">{title}</div>
+                    </div>
+                    <div className="flex items-center">
+                      <div
+                        className="social-link-item-icon social-link-item-icon-slate"
+                        onClick={() => {
+                          updateSocialSettings(
+                            "list",
+                            list.filter((item, idx) => idx !== index)
+                          );
+                        }}
+                      >
+                        <FontAwesomeIcon icon={faTrash} className="social-link-item-icon-svg social-link-item-icon-svg-deep" />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="margin-top-12 relative">
+                    <Input
+                      addonBefore="https://"
+                      value={linkURL || ""}
+                      onChange={(e) =>
+                        updateSocialSettings(
+                          "list",
+                          list.map((item, idx) => {
+                            if (idx === index) {
+                              return { ...item, linkURL: e.target.value };
+                            } else {
+                              return item;
+                            }
+                          })
+                        )
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <div className="card-item-title margin-top-18">{t("add_social_link")}</div>
+        <div className="social-link-add margin-top-12">
+          {socialList.map((item, index) => {
+            const { image, title } = item;
+            return (
+              <img
+                src={image}
+                key={index}
+                alt={title}
+                className="social-link-add-img"
+                onClick={() => updateSocialSettings("list", list.concat(item))}
+              />
+            );
+          })}
+        </div>
+        <div className="card-item-title margin-top-18"> {t("spacing")}</div>
+        <PaddingSettings
+          padding={{
+            paddingTop: findStyleItem(currentItem.data.styles, "paddingTop"),
+            paddingRight: findStyleItem(currentItem.data.styles, "paddingRight"),
+            paddingLeft: findStyleItem(currentItem.data.styles, "paddingLeft"),
+            paddingBottom: findStyleItem(currentItem.data.styles, "paddingBottom"),
+          }}
+          setPadding={paddingChange}
+        />
+      </>
+    );
+  };
+
+  return (
+    <div className="margin-y-30">
+      {socialLinkLayoutElement()}
+      {PaddingStylesElement()}
+    </div>
+  );
+};
+
+export default SocialLinkSettings;