Upload 172 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/badge-editor.png filter=lfs diff=lfs merge=lfs -text
+public/banner.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,31 @@
+# Dockerfile
+
+# Use an official Node.js runtime as the base image
+FROM node:18
+
+USER 1000
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the container
+COPY --chown=1000 package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+VOLUME /data
+
+# Copy the rest of the application files to the container
+COPY --chown=1000 . .
+RUN chmod +x entrypoint.sh
+
+# Build the Next.js application for production
+# RUN npm run build
+
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3000
+
+RUN npm run build
+
+CMD ["npm", "run", "start"]

README.md

@@ -1,11 +1,13 @@
 ---
 title: Discotools
-emoji: 🐢
-colorFrom: gray
-colorTo: yellow
+emoji: ✨
+colorFrom: blue
+colorTo: pink
 sdk: docker
 pinned: false
+app_port: 3000
+short_description: Generate discord role icon and badge
 license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## This is an old project.

components/clyde/clyde.tsx

@@ -0,0 +1,296 @@
+import { useState } from "react";
+
+export const Clyde = () => {
+  const [isHovered, setIsHovered] = useState(false);
+  return (
+    <svg
+      width="105px"
+      height="105px"
+      viewBox="0 0 262 389"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className="cursor-pointer"
+    >
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g
+          id="Group"
+          transform="translate(0.444809, 0.613233)"
+          fillRule="nonzero"
+        >
+          <path
+            d="M255.4368,258.333967 C239.872,234.577167 204.2368,222.186767 204.2368,222.186767 L184.2688,231.505167 C184.2688,231.505167 206.8992,308.919567 213.1968,314.858767 C219.4944,320.797967 248.6272,324.791567 248.6272,324.791567 C248.6272,324.791567 271.0016,282.090767 255.4368,258.333967 Z"
+            id="Path"
+            fill="#E8EDEC"
+          ></path>
+          <path
+            d="M204.2368,222.186767 L184.2688,231.505167 C184.2688,231.505167 186.4704,238.980367 189.6448,249.425167 C201.9328,244.765967 212.992,238.570767 222.976,230.788367 C212.48,225.053967 204.288,222.237967 204.2368,222.186767 L204.2368,222.186767 Z"
+            id="Path"
+            fill="#BEC9CE"
+          ></path>
+          <path
+            d="M220.5696,288.746767 C216.4736,286.903567 213.4528,283.114767 213.4528,283.114767 L214.272,305.796367 C214.272,305.796367 227.6352,320.695567 226.2016,315.268367 C224.768,309.841167 227.7888,291.869967 227.7376,291.050767 C227.6352,290.231567 223.8976,290.231567 220.5696,288.746767 Z"
+            id="Path"
+            fill="#D0DBE2"
+          ></path>
+          <path
+            d="M253.5424,321.565967 C252.8768,318.596367 248.2688,319.057167 237.4656,316.445967 C226.6624,313.885967 214.7328,308.253967 214.7328,306.973967 L213.4016,360.682767 C218.4704,366.314767 226.8672,370.717967 236.5952,369.181967 C247.2448,367.441167 253.9008,358.071567 253.5936,352.541967 C253.2864,347.012367 248.32,347.729167 248.32,347.729167 C248.9856,343.172367 245.9648,340.151567 246.2208,339.844367 C246.4256,339.485967 254.2592,324.535567 253.5424,321.565967 Z"
+            id="Path"
+            fill="#FFB818"
+          ></path>
+          <path
+            d="M226.7136,313.117967 C220.0064,310.609167 214.784,307.844367 214.784,306.973967 L213.4016,360.682767 C222.6176,370.922767 238.3872,372.868367 248.2688,363.242767 C238.336,368.823567 227.9424,363.908367 227.6864,350.903567 C227.4816,341.482767 232.6528,331.857167 226.7136,313.117967 Z"
+            id="Path"
+            fill="#FF5D12"
+          ></path>
+          <path
+            d="M204.2368,222.186767 L184.2688,231.505167 C184.2688,231.505167 185.3952,235.447567 187.2896,241.591567 L213.9136,286.186767 C220.0576,252.497167 210.0736,229.866767 204.2368,222.186767 L204.2368,222.186767 Z"
+            id="Path"
+            fill="#FFB818"
+          ></path>
+          <path
+            d="M191.744,248.605967 C198.8608,245.789967 205.6192,242.359567 211.968,238.468367 C209.6128,230.788367 206.592,225.309967 204.2368,222.237967 L184.2688,231.556367 C184.2688,231.556367 185.3952,235.498767 187.2896,241.642767 L191.5392,248.759567 C191.5904,248.657167 191.6928,248.605967 191.744,248.605967 L191.744,248.605967 Z"
+            id="Path"
+            fill="#FF5D12"
+          ></path>
+          <path
+            d="M53.6064,213.124367 C27.8016,213.124367 6.8608,234.065167 6.8608,259.869967 L6.8608,324.893967 C6.8608,350.698767 27.8016,371.639567 53.6064,371.639567 L67.6352,371.639567 C93.44,371.639567 114.3808,350.698767 114.3808,324.893967 L114.3808,259.869967 C114.3808,234.065167 93.44,213.124367 67.6352,213.124367 L53.6064,213.124367 Z"
+            id="Path"
+            fill="#D0DBE2"
+          ></path>
+          <path
+            d="M73.3184,213.482767 C47.5136,213.482767 26.5728,234.423567 26.5728,260.228367 L26.5728,325.201167 C26.5728,351.005967 47.5136,371.946767 73.3184,371.946767 L87.3472,371.946767 C113.152,371.946767 134.0928,351.005967 134.0928,325.201167 L134.0928,260.228367 C134.0928,234.423567 113.152,213.482767 87.3472,213.482767 L73.3184,213.482767 Z"
+            id="Path"
+            fill="#BEC9CE"
+          ></path>
+          <ellipse
+            id="Oval"
+            fill="#FFB818"
+            cx="18.2272"
+            cy="278.865167"
+            rx="7.936"
+            ry="9.3184"
+          ></ellipse>
+          <path
+            d="M10.2912,278.865167 C10.2912,283.985167 13.824,288.183567 18.2272,288.183567 C21.76,288.183567 24.7296,285.469967 25.7536,281.681167 C24.4224,282.858767 22.7328,283.575567 20.9408,283.575567 C16.5888,283.575567 13.0048,279.428367 13.0048,274.257167 C13.0048,273.284367 13.1584,272.311567 13.3632,271.441167 C11.52,273.181967 10.2912,275.895567 10.2912,278.865167 Z"
+            id="Path"
+            fill="#FF5D12"
+          ></path>
+          <path
+            d="M16.5376,297.245967 C14.5408,297.245967 12.9024,298.884367 12.9024,300.881167 L12.9024,325.047567 C12.9024,327.044367 14.5408,328.682767 16.5376,328.682767 L19.9168,328.682767 C21.9136,328.682767 23.552,327.044367 23.552,325.047567 L23.552,300.881167 C23.552,298.884367 21.9136,297.245967 19.9168,297.245967 L16.5376,297.245967 Z"
+            id="Path"
+            fill="#FDCC00"
+          ></path>
+          <path
+            d="M16.5376,297.245967 C14.5408,297.245967 12.9024,298.884367 12.9024,300.881167 L12.9024,325.047567 C12.9024,327.044367 14.5408,328.682767 16.5376,328.682767 L19.9168,328.682767 C21.9136,328.682767 23.552,327.044367 23.552,325.047567 L23.552,323.357967 L20.6848,323.357967 C18.688,323.357967 17.0496,321.719567 17.0496,319.722767 L17.0496,297.245967 L16.5376,297.245967 Z"
+            id="Path"
+            fill="#FCA800"
+          ></path>
+          <path
+            d="M68.352,362.986767 C84.1216,395.601167 205.2096,396.625167 216.1664,361.501967 C236.7488,295.658767 191.232,230.429967 187.136,230.481167 L82.432,227.613967 C82.432,227.613967 48.4864,321.975567 68.352,362.986767 Z"
+            id="Path"
+            fill="#E8EDEC"
+          ></path>
+          <path
+            d="M28.0064,255.569167 C21.504,269.239567 19.0464,287.773967 22.3744,304.004367 L66.9184,297.911567 C67.9424,282.397967 84.1216,232.529167 84.1216,232.529167 L60.7232,215.684367 C60.7232,215.684367 43.6736,222.545167 28.0064,255.569167 L28.0064,255.569167 Z"
+            id="Path"
+            fill="#E8EDEC"
+          ></path>
+          <path
+            d="M45.2608,228.381967 C55.1936,236.778767 66.56,243.537167 79.104,248.452367 C81.92,239.185167 84.0704,232.477967 84.0704,232.477967 L60.672,215.633167 C60.672,215.684367 54.3232,218.141967 45.2608,228.381967 Z"
+            id="Path"
+            fill="#BEC9CE"
+          ></path>
+          <path
+            d="M76.1856,247.274767 C94.0032,254.801167 114.3808,258.692367 136.7552,258.692367 C156.416,258.692367 174.9504,255.313167 191.7952,248.554767 C194.1504,247.633167 196.4032,246.609167 198.7072,245.585167 C193.1264,236.061967 188.3648,230.481167 187.1872,230.481167 L82.432,227.613967 C82.432,227.613967 79.6672,235.293967 76.1856,247.274767 Z"
+            id="Path"
+            fill="#BEC9CE"
+          ></path>
+          <path
+            d="M42.6496,231.556367 C47.4624,237.137167 62.1056,256.337167 66.3552,286.135567 C66.3552,286.135567 72.704,243.076367 67.1232,220.241167 L60.7232,215.633167 C60.7232,215.684367 52.6848,218.909967 42.6496,231.556367 L42.6496,231.556367 Z"
+            id="Path"
+            fill="#FFB818"
+          ></path>
+          <path
+            d="M45.2608,228.381967 C52.5824,234.577167 60.6208,239.850767 69.376,244.151567 C69.3248,235.498767 68.7104,226.999567 67.072,220.241167 L60.672,215.633167 C60.672,215.684367 54.1696,218.193167 45.2608,228.381967 L45.2608,228.381967 Z"
+            id="Path"
+            fill="#FF5D12"
+          ></path>
+          <path
+            d="M133.5808,302.980367 L135.8848,325.661967 C136.704,333.495567 143.6672,339.229967 151.552,338.410767 L193.536,334.109967 C201.3696,333.290767 207.104,326.327567 206.2848,318.442767 L203.9808,295.761167 C203.1616,287.927567 196.1984,282.193167 188.3136,283.012367 L146.3296,287.313167 C138.496,288.132367 132.7616,295.146767 133.5808,302.980367 Z"
+            id="Path"
+            fill="#BEC9CE"
+          ></path>
+          <path
+            d="M141.5168,298.628367 L143.872,321.770767 C144.4864,327.658767 149.76,331.959567 155.648,331.396367 L197.888,327.095567 C203.776,326.481167 208.0768,321.207567 207.5136,315.319567 L205.1584,292.177167 C204.544,286.289167 199.2704,281.988367 193.3824,282.551567 L151.1424,286.852367 C145.2032,287.466767 140.9024,292.740367 141.5168,298.628367 Z"
+            id="Path"
+            fill="#D0DBE2"
+          ></path>
+          <ellipse
+            id="Oval"
+            fill="#FFB818"
+            transform="translate(160.568126, 307.574545) rotate(-5.730000) translate(-160.568126, -307.574545) "
+            cx="160.568126"
+            cy="307.574545"
+            rx="7.936"
+            ry="9.3184"
+          ></ellipse>
+          <path
+            d="M152.4736,308.407567 C152.9856,313.527567 156.928,317.316367 161.28,316.855567 C164.8128,316.497167 167.4752,313.476367 168.1408,309.636367 C166.912,310.967567 165.376,311.837967 163.5328,312.042767 C159.1808,312.503567 155.2384,308.714767 154.7264,303.594767 C154.624,302.621967 154.6752,301.649167 154.8288,300.727567 C153.088,302.673167 152.1664,305.437967 152.4736,308.407567 Z"
+            id="Path"
+            fill="#FF5D12"
+          ></path>
+          <path
+            d="M176.5888,303.543567 L193.1776,301.853967 C195.1744,301.649167 196.608,299.857167 196.4032,297.911567 L196.3008,297.041167 C196.096,295.044367 194.304,293.610767 192.3584,293.815567 L175.7696,295.505167 C173.7728,295.709967 172.3392,297.501967 172.544,299.447567 L172.6464,300.317967 C172.8512,302.314767 174.592,303.748367 176.5888,303.543567 Z"
+            id="Path"
+            fill="#A0CF30"
+          ></path>
+          <path
+            d="M178.0736,318.033167 L194.6624,316.343567 C196.6592,316.138767 198.0928,314.346767 197.888,312.401167 L197.7856,311.530767 C197.5808,309.533967 195.7888,308.100367 193.8432,308.305167 L177.2544,309.994767 C175.2576,310.199567 173.824,311.991567 174.0288,313.937167 L174.1312,314.807567 C174.2848,316.804367 176.0768,318.237967 178.0736,318.033167 Z"
+            id="Path"
+            fill="#FDCC00"
+          ></path>
+          <path
+            d="M175.4624,303.645967 L194.304,301.700367 C195.6864,301.546767 196.6592,300.164367 196.5056,298.525967 L196.4544,298.218767 L177.6128,300.164367 C176.2304,300.317967 175.0016,299.089167 174.848,297.501967 L174.6432,295.607567 C173.2608,295.761167 172.288,297.143567 172.4416,298.781967 L172.6464,300.983567 C172.8512,302.621967 174.08,303.799567 175.4624,303.645967 L175.4624,303.645967 Z"
+            id="Path"
+            fill="#89A520"
+          ></path>
+          <path
+            d="M176.9472,318.186767 L195.7888,316.241167 C197.1712,316.087567 198.144,314.705167 197.9904,313.066767 L197.9392,312.759567 L179.0976,314.705167 C177.7152,314.858767 176.4864,313.629967 176.3328,312.042767 L176.128,310.148367 C174.7456,310.301967 173.7728,311.684367 173.9264,313.322767 L174.1312,315.524367 C174.336,317.111567 175.5648,318.289167 176.9472,318.186767 L176.9472,318.186767 Z"
+            id="Path"
+            fill="#FCA800"
+          ></path>
+          <ellipse
+            id="Oval"
+            fill="#E8EDEC"
+            cx="136.7552"
+            cy="128.797967"
+            rx="122.368"
+            ry="117.8112"
+          ></ellipse>
+          <path
+            d="M147.2,11.3963673 C75.264,5.55956735 14.336,60.1387673 14.336,128.797967 C14.336,202.935567 67.8912,251.524367 146.8416,246.301967 C73.8304,241.745167 35.2768,190.903567 35.2768,128.797967 C35.2768,67.1019673 84.48,16.5163673 147.2,11.3963673 Z"
+            id="Path"
+            fill="#D0DBE2"
+          ></path>
+          <path
+            d="M95.8464,9.29716735 C88.9856,13.4955673 86.1696,21.4827673 86.1696,21.4827673 C86.1696,21.4827673 128.9216,22.1995673 141.9264,66.2827673 L201.8304,66.2827673 C201.8304,66.2827673 206.1312,31.6715673 174.2848,10.9355673 C142.7968,-9.49323265 104.5504,3.97236735 95.8464,9.29716735 L95.8464,9.29716735 Z"
+            id="Path"
+            fill="#FFB818"
+          ></path>
+          <path
+            d="M96.1024,9.14356735 L95.7952,9.29716735 C88.9344,13.4955673 86.1184,21.4827673 86.1184,21.4827673 C86.1184,21.4827673 128.8704,22.1995673 141.8752,66.2827673 L152.5248,66.2827673 C152.1152,64.7467673 151.6544,63.1595673 151.1424,61.4699673 C138.8032,20.7147673 114.0224,10.6795673 96.1024,9.14356735 L96.1024,9.14356735 Z"
+            id="Path"
+            fill="#FF5D12"
+          ></path>
+          <path
+            d="M57.6512,112.874767 C46.8992,144.772367 63.2832,224.849167 154.7776,224.849167 C261.0688,224.849167 259.9424,133.303567 252.4672,107.652367 C240.64,66.8459673 213.7088,57.0155673 174.1824,54.3019673 C112.2816,50.0523673 72.2944,69.4059673 57.6512,112.874767 Z"
+            id="Path"
+            fill="#000000"
+          ></path>
+          <path
+            d="M168.448,238.980367 C182.5792,237.444367 208.384,223.159567 189.2352,222.391567 C185.5488,222.237967 192.9216,213.226767 177.3056,213.124367 C159.8464,213.021967 161.792,226.897167 142.7968,229.303567 C123.7504,231.761167 144.0768,241.693967 168.448,238.980367 L168.448,238.980367 Z"
+            id="Path"
+            fill="#E8EDEC"
+          ></path>
+          <ellipse
+            id="Oval"
+            fill="#FFB818"
+            cx="25.9584"
+            cy="141.393167"
+            rx="24.832"
+            ry="42.2912"
+          ></ellipse>
+          <ellipse
+            id="Oval"
+            fill="#FF5D12"
+            cx="18.944"
+            cy="141.393167"
+            rx="18.944"
+            ry="35.584"
+          ></ellipse>
+          <g
+            transform="translate(64.249724, 83.345216)"
+            fill="#474747"
+            id="Shape"
+          >
+            <path d="M172.959876,7.97435136 C173.369476,3.98075136 170.451076,0.396751356 166.457476,0.0383513555 C162.463876,-0.371248644 158.879876,2.54715136 158.521476,6.54075136 C158.111876,10.5343514 161.030276,14.1183514 165.023876,14.4767514 C169.017476,14.8863514 172.550276,11.9679514 172.959876,7.97435136 Z M160.774276,109.247951 C160.108676,110.118351 161.337476,111.193551 162.105476,110.425551 C181.715076,91.4815514 191.187076,49.1903514 178.796676,20.2111514 C177.567876,17.2927514 174.188676,15.9615514 171.270276,17.1903514 C168.300676,18.4703514 166.918276,21.9519514 168.403076,24.9727514 C177.670276,43.9167514 177.311876,69.1071514 170.860676,89.1775514 C166.662276,102.182351 160.671876,109.401551 160.774276,109.247951 L160.774276,109.247951 Z M0.00627565551,56.8191514 C0.723075656,64.9087514 2.66867566,72.9471514 5.63827566,80.6271514 C10.8094757,93.9391514 17.8238757,102.643151 17.6190757,102.387151 C18.9502757,104.127951 21.4078757,104.486351 23.1486757,103.206351 C24.8894757,101.875151 25.2478757,99.4175514 23.9678757,97.6767514 C23.3534757,96.8575514 16.6462757,90.2527514 10.6046757,78.4767514 C4.46067566,66.4447514 2.87347566,56.1535514 2.92467566,56.4607514 C2.56627566,54.5663514 -0.147324344,54.9759514 0.00627565551,56.8191514 Z M29.3950757,104.639951 C26.7326757,105.049551 24.8382757,107.507151 25.2478757,110.220751 C25.6574757,112.883151 28.1150757,114.777551 30.8286757,114.367951 C33.4910757,113.958351 35.3854757,111.500751 34.9758757,108.787151 C34.5662757,106.073551 32.1086757,104.230351 29.3950757,104.639951 Z"></path>
+          </g>
+          <path
+            d="M214.681871,100.902169 C201.516737,89.3061686 180.601537,91.0902023 168.283842,105.029978 C155.118363,93.4335095 134.743599,95.4683743 123.258102,109.089316 C111.772605,122.710258 113.958018,141.612003 126.909166,152.193685 L172.379643,189.540493 L215.003181,145.28004 C227.534789,132.355011 227.464387,112.462126 214.681871,100.902169 Z"
+            id="Path"
+            fill={isHovered ? "#FF5D12" : "#57F287"}
+          ></path>
+          <path
+            d="M22.3744,304.004367 C26.0608,321.821967 36.8128,336.823567 57.088,339.383567 C95.1296,344.196367 110.2848,306.973967 110.2848,306.973967 L76.6464,279.018767 C66.048,288.337167 48.3328,294.532367 48.3328,294.532367 L22.3744,304.004367 Z"
+            id="Path"
+            fill="#E8EDEC"
+          ></path>
+          <g transform="translate(34.406400, 299.498767)" fill="#D0DBE2">
+            <path
+              d="M75.8272,7.424 C75.776,7.424 75.776,7.424 75.8272,7.424 C75.776,7.3728 75.7248,7.3728 75.7248,7.3216 C75.1616,6.912 72.96,5.3248 65.5872,0 C65.536,0 42.0352,49.1008 0,28.8256 C5.5808,34.6112 13.1072,38.656 22.7328,39.8848 C60.7232,44.6976 75.8784,7.4752 75.8272,7.424 C75.8784,7.4752 75.8272,7.424 75.8272,7.424 L75.8272,7.424 Z"
+              id="Shape"
+            ></path>
+            <path
+              d="M75.7248,7.3216 C75.7248,7.3216 75.776,7.3216 75.776,7.3728 C75.776,7.424 75.7248,7.3728 75.7248,7.3216 C75.6736,7.3216 75.6736,7.3216 75.7248,7.3216 Z"
+              id="Path"
+            ></path>
+            <path
+              d="M75.776,7.3728 L75.7248,7.3216 C75.7248,7.3728 75.7248,7.3728 75.776,7.3728 Z"
+              id="Path"
+            ></path>
+          </g>
+          <path
+            d="M73.728,279.530767 C66.4576,285.418767 57.7024,289.361167 49.0496,292.842767 C46.7456,293.764367 44.4928,294.634767 42.1888,295.505167 C41.5744,295.709967 41.1648,296.324367 41.3696,296.989967 C41.5232,297.553167 42.24,298.065167 42.8544,297.809167 C51.7632,294.481167 60.672,290.948367 68.7616,285.981967 C71.1168,284.548367 73.3184,282.961167 75.4688,281.271567 C75.9808,280.861967 75.8784,279.991567 75.4688,279.581967 C74.9568,279.018767 74.24,279.121167 73.728,279.530767 L73.728,279.530767 Z"
+            id="Path"
+            fill="#BEC9CE"
+          ></path>
+          <path
+            d="M158.1056,243.690767 C160.1536,238.519567 157.7472,229.917967 146.2272,234.065167 C134.7072,238.212367 114.688,245.380367 111.7696,244.919567 C108.8,244.407567 110.7456,236.113167 102.3488,231.505167 C96.3584,228.228367 87.9104,229.969167 86.528,235.805967 C85.1456,241.642767 94.464,256.797967 87.9104,265.757967 C84.9408,269.802767 74.2912,277.789967 73.2672,279.172367 C72.2432,280.554767 76.3904,293.866767 86.3232,300.983567 C96.3072,308.100367 110.08,311.991567 112.64,310.711567 C115.2,309.431567 122.7776,292.740367 124.0064,292.074767 C125.2352,291.409167 134.144,290.538767 140.8512,280.042767 C146.6368,271.031567 140.1856,257.156367 140.3392,257.156367 C140.544,257.156367 156.0576,248.861967 158.1056,243.690767 L158.1056,243.690767 Z"
+            id="Path"
+            fill="#FFB818"
+          ></path>
+          <path
+            d="M248.32,347.729167 C248.32,347.729167 246.784,353.463567 242.7392,356.791567 C242.7392,356.791567 249.344,354.487567 251.4944,348.394767 C250.0608,347.473167 248.32,347.729167 248.32,347.729167 L248.32,347.729167 Z"
+            id="Path"
+            fill="#FF5D12"
+          ></path>
+          <path
+            d="M110.4384,364.317967 C85.9136,367.338767 70.3488,358.020367 62.8736,351.773967 C59.5968,349.009167 54.8352,348.855567 51.456,351.466767 C46.7968,354.999567 46.5408,362.013967 51.0464,365.751567 C60.0064,373.226767 76.544,383.261967 101.0688,383.261967 C123.904,383.261967 145.0496,375.479567 158.4128,356.945167 C166.144,346.193167 168.0896,336.209167 168.2944,335.133967 C163.6352,332.164367 153.6512,332.522767 148.48,336.311567 C148.48,336.260367 144.384,360.170767 110.4384,364.317967 L110.4384,364.317967 Z"
+            id="Path"
+            fill="#82D1FF"
+          ></path>
+          <path
+            d="M47.872,357.610767 C47.5136,360.580367 48.5376,363.652367 51.0464,365.751567 C60.0064,373.226767 76.544,383.261967 101.0688,383.261967 C123.904,383.261967 145.0496,375.479567 158.4128,356.945167 C166.144,346.193167 168.0896,336.209167 168.2944,335.133967 C167.424,334.570767 166.3488,334.109967 165.1712,333.802767 C157.1328,358.173967 134.656,376.657167 99.3792,376.657167 C72.2432,376.605967 51.712,362.679567 47.872,357.610767 L47.872,357.610767 Z"
+            id="Path"
+            fill="#51B1FC"
+          ></path>
+          <path
+            d="M76.4928,357.969167 C76.4928,357.969167 76.4416,358.020367 76.4928,357.969167 C76.544,357.764367 76.544,357.764367 76.4928,357.969167 Z"
+            id="Path"
+            fill="#51B1FC"
+          ></path>
+          <g
+            transform="translate(52.633600, 341.073167)"
+            fill="#51B1FC"
+            id="Shape"
+          >
+            <path d="M0,25.9584 C1.1776,26.88 2.5088,27.8528 3.9424,28.8256 C8.192,24.4224 11.9808,19.5584 15.104,14.2848 C13.6192,13.312 12.3392,12.3392 11.1616,11.4688 C8.2432,16.384 5.4272,19.8656 6.1952,18.8928 C4.3008,21.248 2.2528,23.6544 0,25.9584 Z M18.5856,36.608 C22.2208,31.5904 25.0368,26.0608 27.5456,20.3776 C25.9584,19.8144 24.4736,19.2512 23.0912,18.6368 C18.8928,28.2112 15.0016,33.536 14.1312,34.6624 C15.5136,35.3792 17.0496,35.9936 18.5856,36.608 L18.5856,36.608 Z M36.5056,41.3184 C38.2976,35.4304 39.5264,29.3888 40.192,23.296 C38.5536,23.0912 36.9664,22.8352 35.4304,22.528 C34.816,28.6208 33.5872,34.6112 31.744,40.4992 C33.28,40.8576 34.8672,41.1136 36.5056,41.3184 Z M53.3504,42.0352 C53.76,35.8912 53.8112,29.7472 53.4016,23.6544 C51.7632,23.7568 50.1248,23.808 48.5888,23.808 C48.9984,29.9008 48.9472,36.0448 48.5376,42.1888 C50.1248,42.1376 51.7632,42.1376 53.3504,42.0352 Z M65.6384,40.5504 C67.2256,40.2432 68.8128,39.8848 70.3488,39.4752 C69.632,33.3824 68.5056,27.392 67.072,21.4528 C65.5872,21.8624 64,22.2208 62.3616,22.528 C64.6656,31.744 65.4848,39.0656 65.28,37.6832 C65.4336,38.6048 65.536,39.5264 65.6384,40.5504 Z M81.5616,35.5328 C83.0464,34.8672 84.48,34.1504 85.9136,33.3824 C84.0704,27.648 81.7152,22.016 78.7968,16.6912 C77.4656,17.4592 76.032,18.176 74.496,18.8416 C77.3632,24.1152 79.7184,29.5936 81.5616,35.5328 Z M96.3584,26.1632 C97.5872,25.088 98.7648,23.9616 99.9424,22.784 C96.6656,17.5616 91.9552,12.3392 88.1664,9.2672 C87.1424,10.3936 85.9648,11.52 84.6336,12.6464 C87.6032,14.8992 91.4944,19.2512 93.3376,21.7088 C92.672,20.8384 94.5152,23.0912 96.3584,26.1632 L96.3584,26.1632 Z M110.7456,7.68 C105.6256,4.4032 100.0448,1.8432 94.2592,0 C93.696,1.28 92.928,2.7648 91.9552,4.352 C94.2592,5.0688 96.4608,5.8368 98.56,6.7072 C97.4336,6.2464 102.4,8.1408 108.4416,11.9296 C109.2608,10.4448 110.0288,9.0112 110.7456,7.68 L110.7456,7.68 Z"></path>
+          </g>
+          <path
+            d="M158.1056,243.690767 C158.9248,241.642767 159.0272,239.082767 158.1568,236.983567 C151.1424,247.786767 136.0896,251.575567 134.144,255.978767 C132.096,260.535567 140.9024,279.991567 115.9168,288.183567 C108.3904,290.641167 110.4896,288.797967 96.6144,306.717967 C103.9872,309.994767 110.8992,311.530767 112.6912,310.660367 C115.2512,309.380367 122.8288,292.689167 124.0576,292.023567 C125.2864,291.357967 134.1952,290.487567 140.9024,279.991567 C146.688,270.980367 140.2368,257.105167 140.3904,257.105167 C140.544,257.156367 156.0576,248.861967 158.1056,243.690767 Z"
+            id="Path"
+            fill="#FF5D12"
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
+};

components/clyde/message.tsx

@@ -0,0 +1,54 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { useMount, useUpdateEffect } from "react-use";
+
+import { Clyde } from "./clyde";
+
+export const ClydeMessage = ({
+  message,
+  auto = false,
+  onClick,
+}: {
+  message: string;
+  auto?: boolean;
+  onClick: any;
+}) => {
+  const [show, setShow] = useState(false);
+
+  useMount(() => {
+    if (auto) {
+      setTimeout(() => {
+        setShow(true);
+      }, 2000);
+    }
+  });
+
+  useUpdateEffect(() => {
+    if (auto && show) {
+      setTimeout(() => {
+        setShow(false);
+      }, 5000);
+    }
+  }, [show]);
+
+  return (
+    <div
+      className="left-0 lg:left-14 max-w-max group absolute top-0 transform -translate-y-[calc(100%-10px)] -z-1"
+      onClick={onClick}
+    >
+      <Clyde />
+      <div
+        className={classNames(
+          "transition-all duration-200 absolute top-2 left-0 bg-white shadow-xl text-sm text-dark-200 font-medium rounded-lg px-3.5 py-1.5 whitespace-nowrap transform group-hover:translate-x-[90px] opacity-0 group-hover:opacity-100",
+          {
+            "translate-x-[90px] opacity-100": show,
+          }
+        )}
+      >
+        {message}
+        <div className="w-[0px] h-[0px] border-t-[7px] border-t-transparent border-b-[7px] border-b-transparent border-r-[7px] border-r-white absolute top-[calc(50%-7px)] -left-[6px]" />
+      </div>
+      {/* Hello<p>lol</p> */}
+    </div>
+  );
+};

components/collapse/index.tsx

@@ -0,0 +1,47 @@
+import { ChevronDownIcon } from "@heroicons/react/solid";
+import classNames from "classnames";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+
+export const Collapse = ({
+  children,
+  title,
+  className,
+  open: defaultOpen = false,
+  onOpenClassName,
+  parentClassName,
+}: {
+  children: React.ReactNode;
+  title: string | React.ReactNode;
+  className?: string;
+  open?: boolean;
+  onOpenClassName?: string;
+  parentClassName?: string;
+}) => {
+  const [open, setOpen] = useState(defaultOpen);
+  const intl = useIntl();
+
+  return (
+    <div className={`${parentClassName} w-full`}>
+      <div
+        className={`${className} flex items-center justify-between cursor-pointer transition-all duration-200 ${
+          open && onOpenClassName
+        }`}
+        onClick={() => setOpen(!open)}
+      >
+        {typeof title === "string" ? intl.formatMessage({ id: title }) : title}
+        <div>
+          <ChevronDownIcon
+            className={classNames(
+              "w-5 text-white opacity-50 transition-all duration-200",
+              {
+                "rotate-180": open,
+              }
+            )}
+          />
+        </div>
+      </div>
+      {open && children}
+    </div>
+  );
+};

components/color-picker/index.tsx

@@ -0,0 +1,104 @@
+import { useState, useRef } from "react";
+import { useClickAway } from "react-use";
+import Picker, { useColorPicker } from "react-best-gradient-color-picker";
+import classNames from "classnames";
+
+import ColorPickerIcon from "@/assets/images/color-picker.svg";
+import { IconType } from "@/types/editor";
+import Image from "next/image";
+
+export const ColorPicker = ({
+  value,
+  data,
+  gradients = true,
+  full = false,
+  onChange,
+  className,
+}: {
+  value?: string;
+  data?: any;
+  gradients?: boolean;
+  full?: boolean;
+  onChange: (c: any, datas: any) => void;
+  className?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  const [color, setColor] = useState(value ?? "#fff");
+  const { getGradientObject } = useColorPicker(color, setColor);
+
+  useClickAway(ref, () => setOpen(false));
+
+  const renderBackground = (data: any) => {
+    if (data?.gradient?.enabled) {
+      if (data?.gradient?.type === "linearGradient") {
+        return {
+          background: `linear-gradient(${data?.gradient?.colours
+            ?.map((e: any) => e.value)
+            .join(", ")})`,
+        };
+      } else {
+        return {
+          background: `radial-gradient(${data?.gradient?.colours
+            ?.map((e: any) => e.value)
+            .join(", ")})`,
+        };
+      }
+    }
+    return { backgroundColor: data?.colour ?? data?.color ?? "#fff" };
+  };
+
+  return (
+    <div className="relative ml-[2px]">
+      <div
+        ref={ref}
+        className={classNames(
+          "bg-dark-500 z-[100] md:z-10 lg:rounded-md shadow-lg p-3 border border-dark-600 fixed md:absolute w-full md:w-max md:h-min bottom-0 md:-top-full left-0 transform md:translate-x-7",
+          {
+            "pointer-events-none opacity-0": !open,
+          }
+        )}
+      >
+        {open && (
+          <Picker
+            value={color}
+            hidePresets={true}
+            hideAdvancedSliders={true}
+            hideColorGuide={true}
+            hideInputType={true}
+            onChange={(c: string) => {
+              setColor(c);
+              const datas = getGradientObject();
+              onChange(c, datas);
+            }}
+            className={`${
+              data?.gradient?.enabled
+                ? "color__picker_discotools--gradient"
+                : "color__picker_discotools"
+            } ${gradients ? "" : "color__picker without-gradients"}`}
+          />
+        )}
+      </div>
+      <div
+        className={classNames(
+          `group flex items-center transition-all duration-200 hover:ring-opacity-100 ring-opacity-70 justify-center border-[1px] borderk-dark-600 ring-[1px] ring-white h-8 rounded cursor-pointer ${className}`,
+          {
+            "w-20": !full,
+            "w-full": full,
+          }
+        )}
+        style={data ? renderBackground(data) : { backgroundColor: color }}
+        onClick={() => setOpen(true)}
+      >
+        <Image
+          src={ColorPickerIcon}
+          width={12}
+          height={12}
+          alt="ColorPicker"
+          className="opacity-80"
+        />
+      </div>
+    </div>
+  );
+};

components/editor-badge/badge-editor.constants.ts

@@ -0,0 +1,39 @@
+import { BadgeType } from "types/badge";
+
+export const DEFAULT_VALUE: BadgeType = {
+  colour: "#5865F1",
+  gradient: {
+    enabled: false,
+    colours: [],
+    angle: 0,
+    type: "linear-gradient",
+  },
+  text: {
+    value: "DISCOTOOLS.XYZ",
+    colour: "#ffffff",
+    gradient: {
+      enabled: false,
+      colours: [],
+      angle: 0,
+      type: "linear-gradient",
+    },
+  },
+  icon: {
+    component: "King",
+    position: "left",
+    enabled: true,
+    colour: "#ffffff",
+  },
+  shinyEffect: false,
+  type: "circle",
+  radius: 40,
+  fontFamily: "Montserrat",
+  fontWeight: "700",
+  letterSpacing: 0,
+  border: {
+    width: 0,
+    colour: "#ffffff",
+  },
+};
+
+export const RATIONAL_BADGE_WIDTH = 32;

components/editor-badge/comps/badge.tsx

@@ -0,0 +1,163 @@
+import { forwardRef, useEffect, useRef, useState } from "react";
+
+import { BadgeType } from "@/types/badge";
+import { FONT_FAMILY } from "@/components/font-family/font-family.constants";
+
+import { RATIONAL_BADGE_WIDTH } from "../badge-editor.constants";
+import { Icons } from "@/components/svg/icons";
+import { IconItem } from "@/types/editor";
+import { BADGE_COMPONENTS } from "@/components/svg/badges";
+import classNames from "classnames";
+import { ShineEffect } from "./shine_effect";
+
+export const Badge = forwardRef(
+  (
+    {
+      badge,
+      size = "medium",
+    }: {
+      badge: BadgeType;
+      size?: "medium" | "small";
+    },
+    ref
+  ) => {
+    const textRef = useRef<any>(null);
+    const svgRef = useRef<any>(null);
+    const badgeContentRef = useRef<any>(null);
+    const [viewBox, setViewBox] = useState<string>("0 0 24 24");
+
+    useEffect(() => {
+      if (!textRef.current) return;
+      if (!badgeContentRef.current) return;
+
+      const textWidth = textRef.current.getBoundingClientRect().width;
+
+      let newBadgeWidth = RATIONAL_BADGE_WIDTH;
+      if (textWidth > RATIONAL_BADGE_WIDTH) {
+        newBadgeWidth = Math.ceil(textWidth / 32) * 32;
+      }
+      if (
+        (findShape?.autoResize || badge.type === "circle") &&
+        newBadgeWidth - textWidth < (badge.type === "circle" ? 6 : 3)
+      )
+        newBadgeWidth += 32;
+      badgeContentRef.current.style.width = `${newBadgeWidth}px`;
+    }, [
+      badge.text,
+      badge.fontFamily,
+      badge.letterSpacing,
+      badge.fontWeight,
+      badge.type,
+      badge?.icon?.component,
+      badge?.icon?.enabled,
+      badge?.icon?.position,
+    ]);
+
+    const fontFamily = FONT_FAMILY?.find((f) => f.label === badge?.fontFamily);
+
+    const defaultStyle = {
+      letterSpacing: badge?.letterSpacing,
+      fontWeight: badge?.fontWeight,
+    };
+
+    const findIcon = Icons?.find(
+      (i: IconItem) => badge?.icon?.component === i.name
+    );
+    const findShape = BADGE_COMPONENTS?.find(
+      (b: any) => b.name === badge?.type
+    );
+
+    useEffect(() => {
+      return setViewBox(
+        svgRef?.current?.getAttribute("viewBox") ?? "0 0 200 200"
+      );
+    }, [badge?.icon]);
+
+    const IconComponent = findIcon?.component as any;
+    const ShapeComponent = findShape?.component as any;
+
+    return (
+      <div
+        id={size === "medium" ? "discotools-selected-badge" : ""}
+        ref={ref as any}
+        className="max-w-max flex items-center h-[32px] justify-center relative"
+      >
+        {findShape?.component && (
+          <ShapeComponent.left color={badge?.stringColor ?? badge?.colour} />
+        )}
+        {badge?.shinyEffect && (
+          <>
+            <ShineEffect className="absolute left-[6px] -bottom-[0px] z-1" />
+            <ShineEffect className="absolute right-[6px] -top-[0px] z-1" />
+          </>
+        )}
+        <div
+          className="whitespace-nowrap text-white font-bold flex text-[18px] h-[28px] items-center justify-center text-center transition-all duration-200 relative"
+          ref={badgeContentRef}
+          style={{
+            background: badge?.stringColor ?? badge?.colour,
+            borderRadius: badge.type !== "circle" ? 0 : badge?.radius ?? 0,
+          }}
+        >
+          <div
+            ref={textRef as any}
+            className="flex items-center justify-center gap-2"
+          >
+            {badge?.icon?.enabled &&
+              badge?.icon?.position?.includes("left") &&
+              findIcon?.component &&
+              badge?.icon?.component && (
+                <svg
+                  width={16}
+                  height={16}
+                  fill={badge?.icon?.colour}
+                  viewBox={viewBox}
+                  style={{ minWidth: 16, minHeight: 16 }}
+                >
+                  <IconComponent ref={svgRef as any} />
+                </svg>
+              )}
+
+            {badge?.text?.value && (
+              <p
+                className={`!bg-clip-text text-transparent ${fontFamily?.value}`}
+                style={
+                  badge?.text?.gradient?.enabled
+                    ? {
+                        backgroundImage:
+                          badge?.text?.stringColor ?? badge?.text?.colour,
+                        ...defaultStyle,
+                      }
+                    : {
+                        backgroundColor:
+                          badge?.text?.stringColor ?? badge?.text?.colour,
+                        ...defaultStyle,
+                      }
+                }
+              >
+                {badge?.text?.value}
+              </p>
+            )}
+            {badge?.icon?.enabled &&
+              badge?.icon?.position?.includes("right") &&
+              findIcon?.component &&
+              badge?.icon?.component && (
+                <svg
+                  width={16}
+                  height={16}
+                  fill={badge?.icon?.colour}
+                  viewBox={viewBox}
+                  style={{ minWidth: 16, minHeight: 16 }}
+                >
+                  <IconComponent ref={svgRef as any} />
+                </svg>
+              )}
+          </div>
+        </div>
+        {findShape?.component && (
+          <ShapeComponent.right color={badge?.stringColor ?? badge?.colour} />
+        )}
+      </div>
+    );
+  }
+);

components/editor-badge/comps/download_button.tsx

@@ -0,0 +1,60 @@
+import { useRef, useState } from "react";
+import { ChevronDownIcon } from "@heroicons/react/solid";
+import classNames from "classnames";
+import { useClickAway } from "react-use";
+
+export const DownloadButton = ({
+  onSave,
+}: {
+  onSave: (e?: boolean) => void;
+}) => {
+  const [dropdown, setDropdown] = useState(false);
+  const ref = useRef(null);
+
+  useClickAway(ref, () => {
+    setDropdown(false);
+  });
+
+  return (
+    <div
+      ref={ref}
+      className="flex justify-start mt-5 bg-darkGreen rounded-md relative"
+    >
+      <button
+        onClick={() => onSave()}
+        className="bg-darkGreen w-full text-white font-semibold p-2 rounded-l-md text-sm font-title relative overflow-hidden group"
+      >
+        <div className="absolute top-0 left-0 h-0 bg-blue transition-all duration-300 w-full group-hover:h-1/2" />
+        <div className="absolute bottom-0 left-0 h-0 bg-blue transition-all duration-300 w-full group-hover:h-1/2" />
+        <span className="relative z-1">Download as .zip</span>
+      </button>
+      <div
+        className="bg-dark-600 bg-opacity-10 px-1.5 border-l border-dark-600 border-opacity-20 flex items-center hover:bg-opacity-20 cursor-pointer"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDropdown(!dropdown);
+        }}
+      >
+        <ChevronDownIcon className="w-5 h-5 text-white" />
+      </div>
+      <div
+        className={classNames(
+          "bg-darkGreen w-full rounded-md absolute bottom-0 left-0 translate-y-[calc(100%+8px)] transition-all duration-200",
+          {
+            "pointer-events-none opacity-0 !-translate-y-1/2": !dropdown,
+          }
+        )}
+      >
+        <button
+          onClick={() => onSave(true)}
+          className="bg-darkGreen w-full text-white font-semibold p-2 rounded-md text-sm font-title relative overflow-hidden group"
+        >
+          <div className="absolute top-0 left-0 h-0 bg-blue transition-all duration-300 w-full group-hover:h-1/2" />
+          <div className="absolute bottom-0 left-0 h-0 bg-blue transition-all duration-300 w-full group-hover:h-1/2" />
+          <span className="relative z-1">Download as Image</span>
+        </button>
+      </div>
+    </div>
+  );
+};

components/editor-badge/comps/header/comps/icons-slider.tsx

@@ -0,0 +1,152 @@
+import { useRef, useState } from "react";
+import { useInterval } from "react-use";
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+import { sleep } from "utils";
+import HammerIcon from "assets/images/header/icons-slider/hammer.svg";
+import ShieldIcon from "assets/images/header/icons-slider/shield.svg";
+import CrownIcon from "assets/images/header/icons-slider/crown.svg";
+import PartnerIcon from "assets/images/header/icons-slider/partner.svg";
+import StarIcon from "assets/images/header/icons-slider/star.svg";
+import LeafIcon from "assets/images/header/icons-slider/leaf.svg";
+
+const ICONS = [
+  HammerIcon,
+  ShieldIcon,
+  CrownIcon,
+  PartnerIcon,
+  StarIcon,
+  LeafIcon,
+];
+
+const icon = {
+  hidden: {
+    opacity: 0,
+    pathLength: 0,
+    fill: "rgba(255, 255, 255, 0)",
+  },
+  visible: {
+    opacity: 1,
+    pathLength: 1,
+    fill: "rgba(255, 255, 255, 1)",
+  },
+};
+
+export const IconsSlider = () => {
+  const [selected, setSelected] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useInterval(async () => {
+    if (ref?.current) {
+      ref.current?.classList?.add("opacity-0", "-translate-x-full", "scale-50");
+      await sleep(300);
+      ref.current?.classList?.remove("-translate-x-full");
+      ref.current?.classList?.add("translate-x-full");
+
+      setSelected((prev) => (prev + 1) % ICONS.length);
+      // if (this.selected >= this.avatars.length - 1) {
+      //   this.selected = 0;
+      // } else {
+      //   this.selected += 1;
+      // }
+      await sleep(300);
+      ref.current?.classList?.remove(
+        "translate-x-full",
+        "scale-50",
+        "opacity-0"
+      );
+    }
+  }, 2000);
+
+  return (
+    <div className="w-48 h-32 mx-auto relative z-1 flex items-center justify-center mt-7">
+      {/* <Image
+        src={ShapeIcon}
+        width={32}
+        height={32}
+        alt="Animation shape"
+        className="h-full absolute left-0 top-0 w-full -z-1 backface-visibility"
+      /> */}
+
+      <motion.svg
+        viewBox="0 0 224 70"
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-full absolute left-0 top-0 w-full -z-1 backface-visibility stroke-white stroke-2"
+      >
+        {/* <motion.path
+          d="M154.208 0H39.792l23.074 35-23.074 35h114.416l-23.074-35 23.074-35z"
+          variants={icon}
+          initial="hidden"
+          animate="visible"
+          transition={{
+            default: { duration: 2, ease: "easeInOut" },
+            fill: { duration: 2, ease: [1, 0, 0.8, 1] },
+          }}
+        /> */}
+        <motion.path
+          variants={icon}
+          initial="hidden"
+          animate="visible"
+          transition={{
+            default: { duration: 2, ease: "easeInOut" },
+            fill: { duration: 2, ease: [1, 0, 0.8, 1] },
+          }}
+          d="M183.573 0H39.793l23.073 35-23.074 35h143.781L160.5 35l23.073-35z"
+          fill="#fff"
+        />
+        <motion.path
+          variants={icon}
+          initial="hidden"
+          animate="visible"
+          transition={{
+            default: { duration: 2, ease: "easeInOut" },
+            fill: { duration: 2, ease: [1, 0, 0.8, 1] },
+          }}
+          d="M28.79 0H9.26l5.05 7.609 4.883 7.608 4.21 6.425L32.324 35l-8.923 13.358-2.525 4.058-6.566 9.975L9.26 70h19.53l23.065-35L28.79 0z"
+          fill="#fff"
+        />
+        <motion.path
+          variants={icon}
+          initial="hidden"
+          animate="visible"
+          transition={{
+            default: { duration: 2, ease: "easeInOut" },
+            fill: { duration: 2, ease: [1, 0, 0.8, 1] },
+          }}
+          d="M10.775 21.643L0 35l10.775 13.358L21.55 35 10.775 21.643zM194.765 0h19.525l-5.049 7.609-4.881 7.608-4.208 6.425L191.231 35l8.921 13.358 2.524 4.058 6.565 9.975L214.29 70h-19.525l-23.059-35 23.059-35z"
+          fill="#fff"
+        />
+        <motion.path
+          variants={icon}
+          initial="hidden"
+          animate="visible"
+          transition={{
+            default: { duration: 2, ease: "easeInOut" },
+            fill: { duration: 2, ease: [1, 0, 0.8, 1] },
+          }}
+          d="M212.545 21.7L223.366 35l-10.821 13.3L201.724 35l10.821-13.3z"
+          fill="#fff"
+        />
+      </motion.svg>
+      <div
+        ref={ref}
+        className="transform transition duration-300 w-[45px] h-[45px] filter drop-shadow-xl origin-center"
+      >
+        <Image
+          src={ICONS[selected]}
+          width={32}
+          height={32}
+          alt="Animation icon, change every 3 seconds"
+          className="w-full h-full"
+          draggable="false"
+        />
+      </div>
+      <p></p>
+    </div>
+    //   <div class="w-64 h-64 mx-auto relative z-1 flex items-center justify-center">
+    //   <img src="@/assets/images/shadow_gradient.svg" alt="Linear gradient behind avatar" width="86" height="86" draggable="false" class="h-full absolute left-0 top-0 w-full -z-1 backface-visibility">
+    //   <Avatar />
+    // </div>
+  );
+};

components/editor-badge/comps/header/form/advanced.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { FontFamilySelector } from "@/components/font-family";
+import { FontWeight } from "@/components/font-weight";
+
+import { Switch } from "@/components/switch";
+import { BadgeType } from "@/types/badge";
+import { PremiumOverlay } from "@/components/premium/overlay";
+
+import { Label } from "@/components/label";
+import { Input } from "@/components/input";
+
+export const AdvancedForm = ({
+  badge,
+  setBadge,
+}: {
+  badge: BadgeType;
+  setBadge: (b: BadgeType) => void;
+}) => {
+  const intl = useIntl();
+
+  return (
+    <div className="grid grid-cols-1 gap-4 px-6 pb-6 pt-5">
+      {badge?.type === "circle" && (
+        <div>
+          <Label className="mb-2">Rounded</Label>
+          <Input
+            value={badge?.radius}
+            type="number"
+            placeholder="Badge radius"
+            className="bg-dark-600 rounded p-3 text-sm text-white placeholder-dark-200"
+            onChange={(newRadius) => {
+              let radius: number = Number(newRadius);
+              if (radius > 100) radius = 100;
+              setBadge({ ...badge, radius: Number(radius) });
+            }}
+          />
+        </div>
+      )}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 relative">
+        <div className="lg:col-span-2">
+          <Label>Font</Label>
+        </div>
+        <div>
+          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+            <FormattedMessage id="Font Family" />
+          </p>
+          <FontFamilySelector
+            value={badge?.fontFamily}
+            onSelect={(fontFamily) => setBadge({ ...badge, fontFamily })}
+          />
+        </div>
+        <div>
+          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+            <FormattedMessage id="Font Weight" />
+          </p>
+          <FontWeight
+            value={badge?.fontWeight}
+            onSelect={(fontWeight) => setBadge({ ...badge, fontWeight })}
+          />
+        </div>
+        <div className="lg:col-span-2">
+          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+            <FormattedMessage id="Letter Spacing" />
+          </p>
+          <Input
+            value={badge?.letterSpacing}
+            type="number"
+            placeholder="Letter spacing"
+            className="bg-dark-600 rounded p-3 text-sm text-white placeholder-dark-200"
+            onChange={(newLetterSpacing) => {
+              let letterSpacing: number = Number(newLetterSpacing);
+              if (letterSpacing > 100) letterSpacing = 100;
+              setBadge({
+                ...badge,
+                letterSpacing: Number(letterSpacing),
+              });
+            }}
+          />
+        </div>
+        <PremiumOverlay className="!bg-dark-500 !bg-opacity-80" />
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="lg:col-span-2 flex items-center justify-start gap-3">
+          <Label>Shiny Effect</Label>
+          <Switch
+            value={badge?.shinyEffect}
+            onChange={(enabled: boolean) =>
+              setBadge({
+                ...badge,
+                shinyEffect: enabled,
+              })
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

components/editor-badge/comps/header/form/main.tsx

@@ -0,0 +1,267 @@
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { FontFamilySelector } from "@/components/font-family";
+import { FontWeight } from "@/components/font-weight";
+
+import { Switch } from "@/components/switch";
+import { BadgeType } from "@/types/badge";
+import { ColorPicker } from "components/color-picker";
+import { Label } from "@/components/label";
+import { Input } from "@/components/input";
+import classNames from "classnames";
+import { SelectShapes } from "../../select-shapes";
+import { IconPicker } from "@/components/icon-picker";
+
+export const MainForm = ({
+  badge,
+  setBadge,
+}: {
+  badge: BadgeType;
+  setBadge: (b: BadgeType) => void;
+}) => {
+  const intl = useIntl();
+
+  return (
+    <div className="grid grid-cols-1 gap-4 px-6 pb-6 pt-5">
+      <SelectShapes badge={badge} onChange={setBadge} />
+      <div>
+        <Label className="mb-2">Text</Label>
+        <Input
+          value={badge?.text?.value}
+          placeholder="Badge text"
+          className="bg-dark-600 rounded px-3 py-3 text-sm text-white placeholder-dark-200 w-full"
+          onChange={(value) => {
+            setBadge({
+              ...badge,
+              text: { ...badge.text, value: value as string },
+            });
+          }}
+        />
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="lg:col-span-2">
+          <Label>Colors</Label>
+        </div>
+        <div>
+          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+            <FormattedMessage id="Background" />
+          </p>
+          <ColorPicker
+            data={badge}
+            full
+            value={badge?.stringColor ?? badge?.colour}
+            gradients={badge?.type === "circle"}
+            onChange={(c: any, datas) => {
+              let newBadge = { ...badge, stringColor: c };
+              if (c.includes("gradient")) {
+                const { colors, degrees } = datas;
+                const gradientType = c?.startsWith("linear")
+                  ? "linearGradient"
+                  : "radialGradient";
+                const anglePI =
+                  Number(degrees ? degrees?.replace("deg", "") : 90) *
+                  (Math.PI / 180);
+                const angleCoords = {
+                  x1: Math.round(50 + Math.sin(anglePI) * 50) + "%",
+                  y1: Math.round(50 + Math.cos(anglePI) * 50) + "%",
+                  x2: Math.round(50 + Math.sin(anglePI + Math.PI) * 50) + "%",
+                  y2: Math.round(50 + Math.cos(anglePI + Math.PI) * 50) + "%",
+                };
+
+                newBadge["gradient"] = {
+                  ...newBadge.gradient,
+                  enabled: true,
+                  colours: colors,
+                  angle: angleCoords,
+                  type: gradientType,
+                };
+              } else {
+                newBadge = {
+                  ...newBadge,
+                  colour: c,
+                  gradient: {
+                    ...newBadge?.gradient,
+                    enabled: false,
+                  },
+                };
+              }
+              setBadge(newBadge);
+            }}
+          />
+        </div>
+        <div>
+          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+            <FormattedMessage id="Text" />
+          </p>
+          <ColorPicker
+            data={badge?.text}
+            value={badge?.text?.stringColor ?? badge?.text?.colour}
+            full
+            onChange={(c: any, datas) => {
+              let newBadge = {
+                ...badge,
+                text: { ...badge.text, stringColor: c },
+              };
+              if (c.includes("gradient")) {
+                const { colors, degrees } = datas;
+                const gradientType = c?.startsWith("linear")
+                  ? "linearGradient"
+                  : "radialGradient";
+                const anglePI =
+                  Number(degrees ? degrees?.replace("deg", "") : 90) *
+                  (Math.PI / 180);
+                const angleCoords = {
+                  x1: Math.round(50 + Math.sin(anglePI) * 50) + "%",
+                  y1: Math.round(50 + Math.cos(anglePI) * 50) + "%",
+                  x2: Math.round(50 + Math.sin(anglePI + Math.PI) * 50) + "%",
+                  y2: Math.round(50 + Math.cos(anglePI + Math.PI) * 50) + "%",
+                };
+                newBadge["text"]["gradient"] = {
+                  ...newBadge?.text?.gradient,
+                  enabled: true,
+                  colours: colors,
+                  angle: angleCoords,
+                  type: gradientType,
+                };
+              } else {
+                newBadge = {
+                  ...newBadge,
+                  text: {
+                    ...newBadge?.text,
+                    colour: c,
+                    gradient: {
+                      ...newBadge?.text?.gradient,
+                      enabled: false,
+                    },
+                  },
+                };
+              }
+              setBadge(newBadge);
+            }}
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
+        <div className="lg:col-span-4 flex items-center justify-start gap-3">
+          <Label>Icon</Label>
+          <Switch
+            value={badge?.icon?.enabled}
+            onChange={(enabled: boolean) =>
+              setBadge({
+                ...badge,
+                icon: {
+                  ...badge.icon,
+                  position: badge?.icon?.position ?? "left",
+                  enabled,
+                },
+              })
+            }
+          />
+        </div>
+        <div>
+          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+            <FormattedMessage id="Color" />
+          </p>
+          <ColorPicker
+            data={badge?.icon}
+            full
+            className="h-[38px]"
+            value={badge?.icon?.stringColor ?? badge?.icon?.colour}
+            gradients={false}
+            onChange={(c: any, datas) => {
+              setBadge({
+                ...badge,
+                icon: {
+                  ...badge?.icon,
+                  position: badge?.icon?.position ?? "left",
+                  colour: c,
+                  stringColor: c,
+                },
+              });
+            }}
+          />
+        </div>
+        <div className="flex items-start justify-start gap-4 lg:col-span-3">
+          <div>
+            <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+              <FormattedMessage id="Icon" />
+            </p>
+            <IconPicker
+              icon={badge?.icon?.component}
+              onSelect={(component) => {
+                setBadge({
+                  ...badge,
+                  icon: {
+                    ...badge?.icon,
+                    position: badge?.icon?.position ?? "left",
+                    enabled: true,
+                    component,
+                  },
+                });
+              }}
+            />
+          </div>
+          <div className="w-full">
+            <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+              <FormattedMessage id="Position" />
+            </p>
+            <div className="flex items-center justify-between">
+              <div
+                className={classNames(
+                  "w-full h-[40px] text-sm p-2 text-dark-100 rounded-l-lg border-l border-t border-b border-dark-300 text-center font-semibold cursor-pointer",
+                  {
+                    "bg-green !text-white bg-opacity-30 border-green":
+                      badge?.icon?.position === "left",
+                  }
+                )}
+                onClick={() =>
+                  setBadge({
+                    ...badge,
+                    icon: { ...badge?.icon, position: "left" },
+                  })
+                }
+              >
+                Left
+              </div>
+              <div
+                className={classNames(
+                  "w-full h-[40px] text-sm p-2 text-dark-100 border-t border-b border-dark-300 text-center font-semibold cursor-pointer",
+                  {
+                    "bg-green !text-white bg-opacity-30 border-green":
+                      badge?.icon?.position === "right",
+                  }
+                )}
+                onClick={() =>
+                  setBadge({
+                    ...badge,
+                    icon: { ...badge?.icon, position: "right" },
+                  })
+                }
+              >
+                Right
+              </div>
+              <div
+                className={classNames(
+                  "w-full h-[40px] text-sm p-2 text-dark-100 rounded-r-lg border-t border-r border-b border-dark-300 text-center font-semibold cursor-pointer",
+                  {
+                    "bg-green !text-white bg-opacity-30 border-green":
+                      badge?.icon?.position === "left-right",
+                  }
+                )}
+                onClick={() =>
+                  setBadge({
+                    ...badge,
+                    icon: { ...badge?.icon, position: "left-right" },
+                  })
+                }
+              >
+                Left & Right
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/editor-badge/comps/header/index.tsx

@@ -0,0 +1,84 @@
+import Image from "next/image";
+
+import { Tag } from "components/tag";
+import { IconsSlider } from "./comps/icons-slider";
+
+// import { Editor } from "components/editor";
+// import { ArrayOfIcons } from "components/svg/icons";
+
+// import { Navigation } from "components/navigation";
+
+import Background from "assets/images/header/background.svg";
+import Stars from "assets/images/header/stars.svg";
+import Ananas from "assets/images/header/ananas.svg";
+import Pizza from "assets/images/header/pizza.svg";
+import { FormattedMessage, useIntl } from "react-intl";
+
+export const Header = ({ children }: any) => {
+  const intl = useIntl();
+  return (
+    <header className="bg-white relative z-20">
+      <div className="z-1 px-6 pt-28">
+        <div className="container mx-auto relative">
+          <div className="max-w-[1051px] w-full mx-auto text-center">
+            <Tag
+              label={`${intl.formatMessage({ id: "badge.new" })} 🔥`}
+              className="mb-5"
+            >
+              NEW FEATURE AVAILABLE
+            </Tag>
+            <IconsSlider />
+            <div className="max-w-max relative mx-auto md:px-12 pt-3 z-1 mt-2">
+              <h1 className="text-white font-title font-black text-4xl md:text-[70px] !leading-none text-center">
+                <FormattedMessage
+                  id="badgeEditor.header.title"
+                  values={{ span: () => <br /> }}
+                />{" "}
+                ✨
+              </h1>
+              <Image
+                width={32}
+                height={32}
+                src={Stars}
+                className="absolute top-0 left-0 w-full pointer-events-none"
+                alt="Stars on title"
+              />
+            </div>
+            <h2 className="text-white font-medium text-center mt-5 text-lg md:text-[26px] tracking-wide">
+              <FormattedMessage id="badgeEditor.header.subtitle" />
+            </h2>
+            <p className="text-white text-opacity-70 text-sm mt-2">
+              <FormattedMessage id="footer.legal2" />
+            </p>
+          </div>
+          {children}
+        </div>
+      </div>
+      <div className="absolute top-0 left-0 h-full max-h-[875px] bg-blue -z-1 w-full">
+        <Image
+          width={32}
+          height={32}
+          alt="Pizza with sauce"
+          src={Pizza}
+          className="w-[90px] lg:w-[120px] opacity-60 lg:opacity-100 absolute select-none left-10 lg:left-20 top-32 lg:top-1/3 pointer-events-none  block"
+        />
+        <Image
+          width={32}
+          height={32}
+          alt="Ananas party!"
+          src={Ananas}
+          className="w-[150px] absolute select-none bottom-20 right-16 pointer-events-none hidden lg:block"
+        />
+        <Image
+          width={32}
+          height={32}
+          alt="Background header cloud"
+          src={Background}
+          className="w-full absolute select-none bottom-0 left-0 pointer-events-none -z-1 opacity-50"
+        />
+      </div>
+      {/* <div className="bg-blue h-full w-full absolute top-0 left-0 -z-1">
+      </div> */}
+    </header>
+  );
+};

components/editor-badge/comps/preview.tsx

@@ -0,0 +1,39 @@
+import { useMount, useUpdateEffect } from "react-use";
+import { domToPng } from "modern-screenshot";
+
+import { BadgeType } from "@/types/badge";
+import { useState } from "react";
+
+export const Preview = ({ badge }: { badge: BadgeType }) => {
+  const [badgeUrl, setBadgeUrl] = useState("");
+
+  useUpdateEffect(() => {
+    setTimeout(() => {
+      domToPng(
+        document.getElementById("discotools-selected-badge") as HTMLElement,
+        {
+          scale: 2,
+        }
+      ).then(async (dataUrl) => {
+        setBadgeUrl(dataUrl);
+      });
+    }, 190);
+  }, [badge]);
+
+  useMount(() => {
+    setTimeout(() => {
+      domToPng(
+        document.getElementById("discotools-selected-badge") as HTMLElement,
+        {
+          scale: 2,
+        }
+      ).then(async (dataUrl) => {
+        setBadgeUrl(dataUrl);
+      });
+    }, 100);
+  });
+
+  return (
+    <div>{badgeUrl && <img src={badgeUrl} className="h-[19.25px]" />}</div>
+  );
+};

components/editor-badge/comps/select-shapes.tsx

@@ -0,0 +1,74 @@
+import classNames from "classnames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+import { Label } from "@/components/label";
+import { BADGE_COMPONENTS } from "@/components/svg/badges";
+import { BadgeType } from "@/types/badge";
+import { useUser } from "@/utils/auth";
+import { PremiumContext } from "@/components/premium/premium";
+import { useContext } from "react";
+import { Premium } from "@/components/premium";
+
+export const SelectShapes = ({
+  badge,
+  onChange,
+}: {
+  badge: BadgeType;
+  onChange: (b: BadgeType) => void;
+}) => {
+  const { user } = useUser();
+  const { setOpen } = useContext(PremiumContext);
+  return (
+    <div>
+      <Label className="mb-2">Shapes</Label>
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
+        {BADGE_COMPONENTS.map((component, i) => {
+          const Component = component.mini as any;
+          return (
+            <div
+              key={i}
+              className={classNames(
+                "flex items-center justify-start gap-2 cursor-pointer",
+                {
+                  "opacity-50 relative": component.isPremium && !user,
+                }
+              )}
+              onClick={
+                component.isPremium && !user
+                  ? () => setOpen(true)
+                  : () =>
+                      onChange({
+                        ...badge,
+                        type:
+                          component?.name === badge?.type
+                            ? "circle"
+                            : component.name,
+                      })
+              }
+            >
+              <div
+                className={classNames(
+                  "w-5 h-5 min-w-[1.25rem] border-2 rounded flex items-center justify-center",
+                  {
+                    "bg-green bg-opacity-60 border-green":
+                      badge?.type === component.name,
+                    "border-dark-200": badge?.type !== component.name,
+                  }
+                )}
+              >
+                {badge?.type === component.name && (
+                  <FontAwesomeIcon
+                    icon={faCheck}
+                    className="w-3 text-white text-opacity-100"
+                  />
+                )}
+              </div>
+              <Component />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

components/editor-badge/comps/shine_effect.tsx

@@ -0,0 +1,38 @@
+export const ShineEffect = ({
+  size = 8,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 5 5"
+      version="1.1"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        id="Page-1"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <g
+          id="Group"
+          transform="translate(-102.000000, 0.000000)"
+          fill="#FFFFFF"
+          fill-rule="nonzero"
+        >
+          <polygon
+            id="Shape"
+            points="104.5 0 105.384 1.616 107 2.5 105.384 3.384 104.5 5 103.616 3.384 102 2.5 103.616 1.616"
+          ></polygon>
+        </g>
+      </g>
+    </svg>
+  );
+};

components/editor-badge/comps/tabs.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import classNames from "classnames";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faShapes, faAnglesRight } from "@fortawesome/free-solid-svg-icons";
+import { FormattedMessage } from "react-intl";
+
+const TABS_ELEMENTS = [
+  {
+    icon: faShapes,
+    name: "badgeEditor.tabs.main",
+  },
+  {
+    icon: faAnglesRight,
+    name: "badgeEditor.tabs.advanced",
+  },
+];
+
+export const EditorTabs = ({
+  current,
+  onChange,
+}: {
+  current: number;
+  onChange: (e: number) => void;
+}) => {
+  return (
+    // p-2 lg:p-4
+    <div className="bg-dark-600 rounded-t-2xl">
+      <ul className="w-full relative z-1 grid grid-cols-2">
+        {TABS_ELEMENTS.map((tab, index) => (
+          <li
+            key={index}
+            className={classNames(
+              "hover:bg-blue hover:bg-opacity-50 flex items-center gap-5 lg:gap-4 cursor-pointer text-white text-left text-xs lg:text-sm font-semibold tracking-wide p-4 lg:p-5 justify-center uppercase",
+              {
+                "bg-dark-500 hover:!bg-dark-500 hover:!bg-opacity-100":
+                  current === index,
+                "first-step rounded-t-2xl rounded-r-none": index === 0,
+                "second-step rounded-t-2xl rounded-l-none": index === 1,
+              }
+            )}
+            onClick={() => onChange(index)}
+          >
+            <FontAwesomeIcon icon={tab.icon} className="w-4 min-w-[1rem]" />
+            <p>
+              <FormattedMessage id={tab.name} />
+            </p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

components/editor-badge/comps/user_card.tsx

@@ -0,0 +1,114 @@
+import { useMemo } from "react";
+
+import { BadgeType } from "@/types/badge";
+import { useUser } from "@/utils/auth";
+import DefaultAvatar from "assets/images/avatars/default-avatar.svg";
+import { Moderator } from "@/components/svg/icons/discord";
+import { Boost2 } from "@/components/svg/icons/discord";
+import { Preview } from "./preview";
+import { DownloadButton } from "./download_button";
+
+export const UserCard = ({
+  badge,
+  onSave,
+}: {
+  badge: BadgeType;
+  onSave: (e?: boolean) => void;
+}) => {
+  const { user, loading } = useUser();
+
+  const convertNumberToStringColor = (color: number) => {
+    if (!color) return "#121212";
+    return "#" + color?.toString(16);
+  };
+
+  const bannerStyle = useMemo(() => {
+    let style: any = { backgroundColor: "#121212", height: 60 };
+
+    if (user?.id) {
+      if (user?.banner) {
+        style.backgroundImage = `url(https://cdn.discordapp.com/banners/${user.id}/${user.banner}.gif?size=1024)`;
+        style.height = 120;
+        style.borderLeft = "5px solid #232429";
+        style.borderTop = "5px solid #232429";
+        style.borderRight = "5px solid #232429";
+      } else {
+        // style.backgroundColor = convertNumberToStringColor(user?.accent_color);
+        style.backgroundColor = user?.accent_color;
+      }
+    }
+
+    return style;
+  }, [user]);
+
+  return (
+    <div className="bg-dark-500 rounded-lg w-full overflow-hidden">
+      <header
+        className={`w-full rounded-t-lg bg-cover bg-center bg-no-repeat p-6 relative ${
+          loading && "animate-pulse"
+        }`}
+        style={bannerStyle}
+      >
+        <figure
+          style={{
+            backgroundImage: `url(${
+              user?.id
+                ? user.avatar
+                  ? `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`
+                  : `https://cdn.discordapp.com/embed/avatars/${
+                      user?.id % 5
+                    }.png`
+                : DefaultAvatar.src
+            })`,
+          }}
+          className="w-[80px] h-[80px] rounded-full ring-[6px] ring-dark-500  absolute bottom-0 left-5 translate-y-1/2 bg-cover bg-center"
+        >
+          <div className="bg-[#22A55A] w-[16px] h-[16px] rounded-full absolute bottom-1 right-1 ring-[6px] ring-dark-500"></div>
+        </figure>
+      </header>
+      <main className="px-5 pb-5 pt-4 flex flex-col gap-4 items-end">
+        <div className="rounded-md bg-[#111214] p-1.5 flex items-center justify-end gap-2">
+          <svg
+            width={16}
+            height={16}
+            viewBox="0 0 160 189"
+            fill="#FFAC32"
+            style={{ minWidth: 16, minHeight: 16 }}
+          >
+            <Moderator />
+          </svg>
+          <svg
+            width={16}
+            height={16}
+            viewBox="0 0 170 144"
+            fill="#FF73FA"
+            style={{ minWidth: 16, minHeight: 16 }}
+          >
+            <Boost2 />
+          </svg>
+        </div>
+        <div className="bg-[#111214] rounded-lg px-3 pt-3 pb-4 w-full">
+          <p className="text-white font-bold text-xl">
+            {user ? user?.username : "Captain Astro"}
+          </p>
+          <p className="text-white text-sm">
+            {user ? `${user?.username}` : "captainastro"}
+          </p>
+          <div className="w-full h-[1px] bg-[#2E2F35] my-3" />
+          <p className="text-xs uppercase font-bold text-white mb-2">
+            About me
+          </p>
+          <Preview badge={badge} />
+          {/* <p className="text-xs uppercase font-bold text-white mt-3 mb-2">
+            Member since
+          </p> */}
+          <DownloadButton onSave={onSave} />
+          <p className="text-xs text-dark-200 mt-2">
+            Image will be split into multiple parts. You will upload them as
+            server emojis on Discord to use them on your discord Profile.
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+};

components/editor-badge/index.tsx

@@ -0,0 +1,94 @@
+import { useState, useRef } from "react";
+import { domToPng } from "modern-screenshot";
+import ImageToPieces from "image-to-pieces";
+import JSZip from "jszip";
+import download from "downloadjs";
+
+import {
+  DEFAULT_VALUE,
+  RATIONAL_BADGE_WIDTH,
+} from "components/editor-badge/badge-editor.constants";
+import BackgroundTransparent from "assets/images/editor/transparent_bg.svg";
+import { API } from "@/utils/api";
+import { useUser } from "@/utils/auth";
+
+import { MainForm } from "./comps/header/form/main";
+import { AdvancedForm } from "./comps/header/form/advanced";
+import { Badge } from "./comps/badge";
+import { EditorTabs } from "./comps/tabs";
+import { UserCard } from "./comps/user_card";
+
+export default function Editor() {
+  const { user } = useUser();
+  const [badge, setBadge] = useState({
+    ...DEFAULT_VALUE,
+  });
+
+  const badgeRef = useRef<any>(null);
+  const [current, setCurrent] = useState(0);
+
+  const handleSave = (hasImage = false) => {
+    domToPng(
+      document.getElementById("discotools-selected-badge") as HTMLElement,
+      {
+        scale: 2,
+      }
+    ).then(async (dataUrl) => {
+      if (hasImage) {
+        download(dataUrl, "badge.png", "image/png");
+        // API.downloadBadge();
+        return;
+      }
+
+      if (!badgeRef?.current) return;
+      const badgeWidth = badgeRef.current.getBoundingClientRect().width;
+      const image = new ImageToPieces(
+        null,
+        badgeWidth / RATIONAL_BADGE_WIDTH,
+        1
+      );
+      await image.loadImageByUrl(dataUrl);
+      const tiles = image
+        .getTiles()
+        ?.map((tile: any) => tile.data?.replace("data:image/png;base64,", ""));
+      const zip_folder = new JSZip();
+      tiles.forEach((tile: any, i: number) =>
+        zip_folder.file(`${i}.png`, tile, { base64: true })
+      );
+
+      zip_folder.generateAsync({ type: "blob" }).then(function (content) {
+        download(content, "badges.zip");
+        // API.downloadBadge();
+      });
+    });
+  };
+
+  const renderTabs = () => {
+    switch (current) {
+      case 0:
+        return <MainForm badge={badge} setBadge={setBadge} />;
+      case 1:
+        return <AdvancedForm badge={badge} setBadge={setBadge} />;
+    }
+  };
+
+  return (
+    <div className="flex-col lg:flex-row flex max-w-5xl mx-auto gap-5 lg:gap-10 mt-10">
+      <div className="flex-1 bg-dark-500 shadow-lg rounded-2xl">
+        <EditorTabs current={current} onChange={setCurrent} />
+        {renderTabs()}
+      </div>
+      <div className="flex items-start flex-col gap-5 lg:gap-10 lg:max-w-[375px] w-full">
+        <header
+          className="relative p-5 flex items-center justify-center bg-repeat h-[100px] w-full z-10 transition-all duration-200 first-step rounded-2xl"
+          style={{
+            backgroundImage: `url(${BackgroundTransparent.src})`,
+          }}
+        >
+          <Badge ref={badgeRef} badge={badge} />
+        </header>
+        <UserCard badge={badge} onSave={handleSave} />
+      </div>
+    </div>
+  );
+}

components/editor-icons/comps/header/comps/icons-slider.tsx

@@ -0,0 +1,108 @@
+import { useRef, useState } from "react";
+import { useInterval } from "react-use";
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+import { sleep } from "utils";
+import HammerIcon from "assets/images/header/icons-slider/hammer.svg";
+import ShieldIcon from "assets/images/header/icons-slider/shield.svg";
+import CrownIcon from "assets/images/header/icons-slider/crown.svg";
+import PartnerIcon from "assets/images/header/icons-slider/partner.svg";
+import StarIcon from "assets/images/header/icons-slider/star.svg";
+import LeafIcon from "assets/images/header/icons-slider/leaf.svg";
+
+const ICONS = [
+  HammerIcon,
+  ShieldIcon,
+  CrownIcon,
+  PartnerIcon,
+  StarIcon,
+  LeafIcon,
+];
+
+const icon = {
+  hidden: {
+    opacity: 0,
+    pathLength: 0,
+    fill: "rgba(255, 255, 255, 0)",
+  },
+  visible: {
+    opacity: 1,
+    pathLength: 1,
+    fill: "rgba(255, 255, 255, 1)",
+  },
+};
+
+export const IconsSlider = () => {
+  const [selected, setSelected] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useInterval(async () => {
+    if (ref?.current) {
+      ref.current?.classList?.add("opacity-0", "-translate-x-full", "scale-50");
+      await sleep(300);
+      ref.current?.classList?.remove("-translate-x-full");
+      ref.current?.classList?.add("translate-x-full");
+
+      setSelected((prev) => (prev + 1) % ICONS.length);
+      // if (this.selected >= this.avatars.length - 1) {
+      //   this.selected = 0;
+      // } else {
+      //   this.selected += 1;
+      // }
+      await sleep(300);
+      ref.current?.classList?.remove(
+        "translate-x-full",
+        "scale-50",
+        "opacity-0"
+      );
+    }
+  }, 2000);
+
+  return (
+    <div className="w-32 h-32 mx-auto relative z-1 flex items-center justify-center mt-7">
+      {/* <Image
+        src={ShapeIcon}
+        width={32}
+        height={32}
+        alt="Animation shape"
+        className="h-full absolute left-0 top-0 w-full -z-1 backface-visibility"
+      /> */}
+
+      <motion.svg
+        viewBox="-1 0 130 124"
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-full absolute left-0 top-0 w-full -z-1 backface-visibility stroke-white stroke-2"
+      >
+        <motion.path
+          d="M115.634914,44.3288323 C113.80147,38.3166291 119.301802,28.5951133 115.634914,23.6490789 C111.968027,18.7030445 100.924726,20.8775941 95.9360531,17.2533448 C90.9900187,13.6717337 89.4550426,2.15943794 83.6988819,0.581823534 C77.9427212,-1.0384291 70.3531168,6.97757468 63.9573827,6.97757468 C57.5616486,6.97757468 50.1852353,-1.89119365 44.2158834,0.368631971 C38.2038508,2.62845844 37.0099804,13.7143719 31.9786704,17.295983 C26.9473588,20.9202324 15.6482285,19.0015121 12.1518948,23.6917171 C8.65555928,28.3819221 14.070615,38.7003731 12.1518948,44.3714705 C10.2331745,50.0423548 0,54.7747716 0,61.042591 C0,67.3530486 10.4890031,71.744786 12.3224468,77.7141379 C14.1558906,83.6834897 8.65555928,93.4476437 12.3224468,98.3936781 C16.0319726,103.339712 27.0326352,101.165163 32.0213078,104.789412 C36.9673422,108.371023 38.5875957,119.883771 44.3437981,121.461385 C50.0999588,123.039 57.6895633,115.065651 64.0852973,115.065651 C70.4810314,115.065651 77.8574448,123.465382 83.8267966,121.461385 C89.8387866,119.457389 91.2032099,108.328385 96.1492442,104.789412 C101.095279,101.165163 112.309132,103.083883 115.848105,98.3936781 C119.34444,93.7034731 113.929385,83.3850221 115.848105,77.7141379 C117.766825,72.0432536 128,67.3104104 128,61.042591 C127.914724,54.7321334 117.468358,50.2981841 115.634914,44.3288323 Z"
+          variants={icon}
+          initial="hidden"
+          animate="visible"
+          transition={{
+            default: { duration: 2, ease: "easeInOut" },
+            fill: { duration: 2, ease: [1, 0, 0.8, 1] },
+          }}
+        />
+      </motion.svg>
+      <div
+        ref={ref}
+        className="transform transition duration-300 w-[68px] h-[60px] filter drop-shadow-xl origin-center"
+      >
+        <Image
+          src={ICONS[selected]}
+          width={32}
+          height={32}
+          alt="Animation icon, change every 3 seconds"
+          className="w-full h-full"
+          draggable="false"
+        />
+      </div>
+      <p></p>
+    </div>
+    //   <div class="w-64 h-64 mx-auto relative z-1 flex items-center justify-center">
+    //   <img src="@/assets/images/shadow_gradient.svg" alt="Linear gradient behind avatar" width="86" height="86" draggable="false" class="h-full absolute left-0 top-0 w-full -z-1 backface-visibility">
+    //   <Avatar />
+    // </div>
+  );
+};

components/editor-icons/comps/header/index.tsx

@@ -0,0 +1,84 @@
+import Image from "next/image";
+
+import { Tag } from "components/tag";
+import { IconsSlider } from "./comps/icons-slider";
+
+// import { Editor } from "components/editor";
+// import { ArrayOfIcons } from "components/svg/icons";
+
+// import { Navigation } from "components/navigation";
+
+import Background from "assets/images/header/background.svg";
+import Stars from "assets/images/header/stars.svg";
+import Ananas from "assets/images/header/ananas.svg";
+import Pizza from "assets/images/header/pizza.svg";
+import { FormattedMessage, useIntl } from "react-intl";
+
+export const Header = ({ children }: any) => {
+  const intl = useIntl();
+  return (
+    <header className="bg-white relative z-20">
+      <div className="z-1 px-6 pt-28">
+        <div className="container mx-auto relative">
+          <div className="max-w-[1051px] w-full mx-auto text-center">
+            <Tag
+              label={`${intl.formatMessage({ id: "badge.new" })} 🔥`}
+              className="mb-5"
+            >
+              NEW VERSION RELEASED!
+            </Tag>
+            <IconsSlider />
+            <div className="max-w-max relative mx-auto md:px-12 pt-3 z-1 mt-4">
+              <h1 className="text-white font-title font-black text-4xl md:text-[70px] !leading-none text-center">
+                <FormattedMessage
+                  id="iconsEditor.header.title"
+                  values={{ span: () => <br /> }}
+                />{" "}
+                ✨
+              </h1>
+              <Image
+                width={32}
+                height={32}
+                src={Stars}
+                className="absolute top-0 left-0 w-full pointer-events-none"
+                alt="Stars on title"
+              />
+            </div>
+            <h2 className="text-white font-medium text-center mt-5 text-lg md:text-[26px] tracking-wide">
+              <FormattedMessage id="iconsEditor.header.subtitle" />
+            </h2>
+            <p className="text-white text-opacity-70 text-sm mt-2">
+              <FormattedMessage id="footer.legal2" />
+            </p>
+          </div>
+          {children}
+        </div>
+      </div>
+      <div className="absolute top-0 left-0 h-full max-h-[875px] bg-blue -z-1 w-full">
+        <Image
+          width={32}
+          height={32}
+          alt="Pizza with sauce"
+          src={Pizza}
+          className="w-[90px] lg:w-[120px] opacity-60 lg:opacity-100 absolute select-none left-10 lg:left-20 top-32 lg:top-1/3 pointer-events-none  block"
+        />
+        <Image
+          width={32}
+          height={32}
+          alt="Ananas party!"
+          src={Ananas}
+          className="w-[150px] absolute select-none bottom-20 right-16 pointer-events-none hidden lg:block"
+        />
+        <Image
+          width={32}
+          height={32}
+          alt="Background header cloud"
+          src={Background}
+          className="w-full absolute select-none bottom-0 left-0 pointer-events-none -z-1 opacity-50"
+        />
+      </div>
+      {/* <div className="bg-blue h-full w-full absolute top-0 left-0 -z-1">
+      </div> */}
+    </header>
+  );
+};

components/editor-icons/comps/icons/icon-selected.tsx

@@ -0,0 +1,603 @@
+import classNames from "classnames";
+import {
+  faChevronDown,
+  faChevronRight,
+  faTrash,
+  faCaretDown,
+  faCaretUp,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ListItem } from "components/editor-icons/comps/list/list-item";
+import {
+  Icons as ICONS,
+  IconCustomIcon,
+  IconCustomText,
+} from "components/svg/icons";
+import { IconItem, IconType } from "@/types/editor";
+import { ColorPicker } from "components/color-picker";
+import { Range } from "components/range";
+import { Input } from "components/input";
+import { Switch } from "@/components/switch";
+import { PremiumOverlay } from "@/components/premium/overlay";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Label } from "@/components/label";
+
+export const IconSelected = ({
+  index,
+  totalIcons,
+  icon,
+  current,
+  setCurrent,
+  onDelete,
+  onChange,
+  onChangeOrder,
+}: {
+  index: number;
+  totalIcons: number;
+  icon: IconType;
+  current?: number | null;
+  setCurrent: (index: number | null) => void;
+  onDelete: (index: number) => void;
+  onChange: (idnex: number, icon: IconType) => void;
+  onChangeOrder: (index: number, value: number) => void;
+}) => {
+  const findIcon: any = icon?.custom_text?.enabled
+    ? IconCustomText
+    : icon?.image
+    ? IconCustomIcon
+    : ICONS?.find((i: IconItem) => icon.component === i.name);
+
+  const handleChange = (index: number, icon: any) => {
+    onChange(index, icon);
+  };
+
+  const intl = useIntl();
+
+  return (
+    <div className="flex items-center justify-start gap-3 w-full">
+      <div
+        className={classNames(
+          "bg-dark-600 w-full rounded-lg pl-4 py-4 pr-6 group cursor-pointer transition-all border-2 border-dark-600 duration-200 hover:border-blue",
+          {
+            "!border-blue": current === index,
+          }
+        )}
+      >
+        <div
+          className="tracking-wider flex items-center justify-between gap-4"
+          onClick={() => setCurrent(current === index ? null : index)}
+        >
+          <div className="flex items-center justify-start gap-4">
+            <div className="w-10">
+              {icon?.image ? (
+                <div className="flex items-center justify-center p-2 cursor-pointer rounded-lg relative group border border-dark-200 border-solid">
+                  <img
+                    src={icon?.image}
+                    className="w-full h-full object-contain"
+                  />
+                </div>
+              ) : (
+                <ListItem
+                  icon={findIcon}
+                  fill={findIcon?.defaultColor ?? "#fff"}
+                  tooltip={false}
+                  hoverable={false}
+                  onSelect={() => {}}
+                />
+              )}
+            </div>
+            <div>
+              <p className="text-white font-semibold">
+                <FormattedMessage id={findIcon?.name} />
+              </p>
+              <p className="text-xs text-dark-200">
+                {findIcon?.tags?.join(", ")}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center justify-end gap-4">
+            <div
+              className="bg-danger bg-opacity-60 rounded-lg text-white hover:bg-opacity-100 cursor-pointer w-8 h-8 flex items-center justify-center"
+              onClick={(e: any) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onDelete(index);
+              }}
+            >
+              <FontAwesomeIcon icon={faTrash} className="w-4" />
+            </div>
+            <div className="flex items-center justify-end">
+              <FontAwesomeIcon
+                icon={current === index ? faChevronDown : faChevronRight}
+                className="text-dark-100 transition-all duration-200 w-3"
+              />
+            </div>
+          </div>
+        </div>
+        {current === index && (
+          <div className="border-t border-dark-400 pt-3 mt-4 grid grid-cols-2 gap-4">
+            <div className="col-span-2">
+              <Label className="mb-1">
+                <FormattedMessage id="iconsEditor.editor.customisation.positions" />
+              </Label>
+              <div className="grid grid-cols-2 gap-x-6 gap-y-3">
+                <div className="gap-4 w-full col-span-2 grid grid-cols-3">
+                  <div className="flex items-center gap-3 col-span-2">
+                    <p className="font-semibold uppercase text-dark-200 text-xs">
+                      X
+                    </p>
+                    <Range
+                      value={icon?.position?.x ?? 0}
+                      max={
+                        icon?.custom_text?.enabled
+                          ? 1000
+                          : icon?.position?.xPath ?? undefined
+                      }
+                      onChange={(value) => {
+                        const newIcon = {
+                          ...icon,
+                          position: { ...icon.position, x: Number(value) },
+                        };
+                        handleChange(index, newIcon);
+                      }}
+                    />
+                  </div>
+                  <Input
+                    value={icon?.position?.x}
+                    type="number"
+                    placeholder={intl.formatMessage({
+                      id: "iconsEditor.editor.customisation.positions.x",
+                    })}
+                    className="bg-dark-500 rounded px-2 py-2 text-sm text-white placeholder-dark-200"
+                    onChange={(newX) => {
+                      let x: number = Number(newX);
+                      if (x > 100) x = 100;
+                      const newIcon = {
+                        ...icon,
+                        position: { ...icon.position, x: x },
+                      };
+                      handleChange(index, newIcon);
+                    }}
+                  />
+                </div>
+                <div className="gap-4 w-full col-span-2 grid grid-cols-3">
+                  <div className="flex items-center gap-3 col-span-2">
+                    <p className="font-semibold uppercase text-dark-200 text-xs">
+                      Y
+                    </p>
+                    <Range
+                      value={icon?.position?.y ?? 0}
+                      max={
+                        icon?.custom_text?.enabled
+                          ? 1000
+                          : icon?.position?.yPath ?? undefined
+                      }
+                      onChange={(value) => {
+                        const newIcon = {
+                          ...icon,
+                          position: { ...icon.position, y: Number(value) },
+                        };
+                        handleChange(index, newIcon);
+                      }}
+                    />
+                  </div>
+                  <Input
+                    value={icon?.position?.y}
+                    type="number"
+                    placeholder={intl.formatMessage({
+                      id: "iconsEditor.editor.customisation.positions.y",
+                    })}
+                    className="bg-dark-500 rounded px-2 py-2 text-sm text-white placeholder-dark-200"
+                    onChange={(newY) => {
+                      let y = Number(newY);
+                      if (y > 100) y = 100;
+                      const newIcon = {
+                        ...icon,
+                        position: { ...icon.position, y: y },
+                      };
+                      handleChange(index, newIcon);
+                    }}
+                  />
+                </div>
+                <div className="gap-4 w-full col-span-2 grid grid-cols-3">
+                  <div className="flex items-center gap-3 col-span-2">
+                    <p className="font-semibold uppercase text-dark-200 text-xs">
+                      Z
+                    </p>
+                    <Range
+                      value={icon?.position?.angle ?? 0}
+                      max={360}
+                      onChange={(value) => {
+                        const newIcon = {
+                          ...icon,
+                          position: { ...icon.position, angle: Number(value) },
+                        };
+                        handleChange(index, newIcon);
+                      }}
+                    />
+                  </div>
+                  <Input
+                    value={icon?.position?.angle}
+                    placeholder={intl.formatMessage({
+                      id: "iconsEditor.editor.customisation.angle",
+                    })}
+                    type="number"
+                    className="bg-dark-500 rounded px-2 py-2 text-sm text-white placeholder-dark-200"
+                    onChange={(newAngle) => {
+                      let angle = Number(newAngle);
+                      if (angle > 360) angle = 360;
+                      const newIcon = {
+                        ...icon,
+                        position: { ...icon.position, angle: angle },
+                      };
+                      handleChange(index, newIcon);
+                    }}
+                  />
+                </div>
+                {!icon?.custom_text?.enabled && (
+                  <div className="gap-4 w-full col-span-2 grid grid-cols-3">
+                    <div className="flex items-center gap-3 col-span-2">
+                      <p className="font-semibold uppercase text-dark-200 text-xs">
+                        <FormattedMessage id="iconsEditor.editor.customisation.scale" />
+                      </p>
+                      <Range
+                        value={icon?.position?.scale ?? 1}
+                        min={0}
+                        max={2}
+                        step={0.1}
+                        onChange={(value) => {
+                          const newIcon = {
+                            ...icon,
+                            position: {
+                              ...icon.position,
+                              scale: Number(value),
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                    <Input
+                      value={
+                        icon?.position?.scale
+                          ? icon?.position?.scale * 100
+                          : undefined
+                      }
+                      type="number"
+                      placeholder={intl.formatMessage({
+                        id: "iconsEditor.editor.customisation.scale",
+                      })}
+                      className="bg-dark-500 rounded px-2 py-2 text-sm text-white placeholder-dark-200"
+                      onChange={(newScale) => {
+                        let scale = Number(newScale);
+                        if (scale > 100) scale = 100;
+                        const newIcon = {
+                          ...icon,
+                          position: {
+                            ...icon.position,
+                            scale: Math.trunc(scale) / 100,
+                          },
+                        };
+                        handleChange(index, newIcon);
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+            {!icon?.image && (
+              <div className="col-span-2">
+                <Label className="!mb-2.5">
+                  <FormattedMessage
+                    id="iconsEditor.editor.customisation.gradientColor"
+                    values={{
+                      span: (t) => (
+                        <span className="text-xs opacity-40">{t}</span>
+                      ),
+                    }}
+                  />
+                </Label>
+                <ColorPicker
+                  data={icon}
+                  value={icon?.stringColor ?? icon?.colour}
+                  onChange={(c: any, datas) => {
+                    let newIcon = { ...icon, stringColor: c };
+                    if (c.includes("gradient")) {
+                      const { colors, degrees } = datas;
+                      const gradientType = c?.startsWith("linear")
+                        ? "linearGradient"
+                        : "radialGradient";
+
+                      const angle = c?.startsWith("linear")
+                        ? c?.replace("linear-gradient(", "")?.split("deg")?.[0]
+                        : 90;
+
+                      newIcon["gradient"] = {
+                        ...newIcon.gradient,
+                        enabled: true,
+                        colours: colors,
+                        angle,
+                        type: gradientType,
+                      };
+                    } else {
+                      newIcon = {
+                        ...newIcon,
+                        colour: c,
+                        gradient: {
+                          ...icon?.gradient,
+                          enabled: false,
+                        },
+                      };
+                    }
+                    handleChange(index, newIcon);
+                  }}
+                />
+              </div>
+            )}
+            {icon?.custom_text?.enabled && (
+              <>
+                <div className="col-span-2">
+                  <Label className="!mb-2.5">
+                    <FormattedMessage id="iconsEditor.editor.customisation.customText" />
+                  </Label>
+                  <div className="grid grid-cols-2 gap-5">
+                    <div>
+                      <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                        <FormattedMessage id="iconsEditor.editor.customisation.customText.text" />
+                      </p>
+                      <input
+                        type="text"
+                        className="bg-dark-500 w-full rounded px-4 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                        placeholder="10"
+                        value={icon?.custom_text?.text}
+                        onChange={({ target }) => {
+                          const newIcon = {
+                            ...icon,
+                            custom_text: {
+                              ...icon.custom_text,
+                              text: target.value,
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                        <FormattedMessage id="iconsEditor.editor.customisation.customText.fontSize" />
+                      </p>
+                      <input
+                        type="number"
+                        className="bg-dark-500 w-full rounded px-4 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                        placeholder="10"
+                        value={icon?.custom_text?.size}
+                        onChange={({ target }) => {
+                          const newIcon = {
+                            ...icon,
+                            custom_text: {
+                              ...icon.custom_text,
+                              size: Number(target.value),
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+            <div className="relative col-span-2 grid grid-cols-2 gap-4">
+              {!icon?.image && (
+                <div>
+                  <Label className="!mb-2.5">
+                    <FormattedMessage id="iconsEditor.editor.customisation.border" />
+                  </Label>
+                  <div className="flex items-start justify-start gap-5">
+                    <div className="w-full">
+                      <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                        <FormattedMessage id="iconsEditor.editor.customisation.width" />
+                      </p>
+                      <input
+                        type="number"
+                        className="bg-dark-500 w-full rounded px-4 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                        placeholder={
+                          intl.formatMessage({
+                            id: "iconsEditor.editor.customisation.width",
+                          }) + "...px"
+                        }
+                        min={0}
+                        value={icon?.border?.width}
+                        onChange={({ target }) => {
+                          const newIcon = {
+                            ...icon,
+                            border: {
+                              ...icon.border,
+                              width: target?.value
+                                ? Number(target.value)
+                                : undefined,
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                        <FormattedMessage id="iconsEditor.editor.customisation.color" />
+                      </p>
+                      <ColorPicker
+                        value={icon?.border?.colour}
+                        gradients={false}
+                        onChange={(c: any) => {
+                          const newIcon = {
+                            ...icon,
+                            border: {
+                              ...icon.border,
+                              colour: c,
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+              <div className="col-span-2">
+                <div className="flex items-center justify-start gap-3 mb-2.5 ">
+                  <Label className="!mb-0">
+                    <FormattedMessage id="iconsEditor.editor.customisation.shadow" />
+                  </Label>
+                  <Switch
+                    value={icon?.shadow?.enabled}
+                    onChange={(enabled: boolean) => {
+                      const newIcon = {
+                        ...icon,
+                        shadow: {
+                          ...icon.shadow,
+                          enabled,
+                        },
+                      };
+                      handleChange(index, newIcon);
+                    }}
+                  />
+                </div>
+                {icon?.shadow?.enabled && (
+                  <div className="gap-5 grid grid-cols-2">
+                    <div className="w-full">
+                      <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                        X
+                      </p>
+                      <input
+                        type="number"
+                        className="bg-dark-500 w-full rounded px-4 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                        placeholder={intl.formatMessage({
+                          id: "iconsEditor.editor.customisation.shadow.x.placeholder",
+                        })}
+                        min={0}
+                        value={icon?.shadow?.position?.x}
+                        onChange={({ target }) => {
+                          const newIcon = {
+                            ...icon,
+                            shadow: {
+                              ...icon.shadow,
+                              position: {
+                                ...icon?.shadow?.position,
+                                x: target?.value
+                                  ? Number(target.value)
+                                  : undefined,
+                              },
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                    <div className="w-full">
+                      <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                        Y
+                      </p>
+                      <input
+                        type="number"
+                        className="bg-dark-500 w-full rounded px-4 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                        placeholder={intl.formatMessage({
+                          id: "iconsEditor.editor.customisation.shadow.y.placeholder",
+                        })}
+                        min={0}
+                        value={icon?.shadow?.position?.y}
+                        onChange={({ target }) => {
+                          const newIcon = {
+                            ...icon,
+                            shadow: {
+                              ...icon.shadow,
+                              position: {
+                                ...icon?.shadow?.position,
+                                y: target?.value
+                                  ? Number(target.value)
+                                  : undefined,
+                              },
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                    <div className="w-full">
+                      <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                        <FormattedMessage id="iconsEditor.editor.customisation.shadow.blur" />
+                      </p>
+                      <input
+                        type="number"
+                        className="bg-dark-500 w-full rounded px-4 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                        placeholder={intl.formatMessage({
+                          id: "iconsEditor.editor.customisation.shadow.blur.placeholder",
+                        })}
+                        min={0}
+                        value={icon?.shadow?.position?.blur}
+                        onChange={({ target }) => {
+                          const newIcon = {
+                            ...icon,
+                            shadow: {
+                              ...icon.shadow,
+                              position: {
+                                ...icon?.shadow?.position,
+                                blur: target?.value
+                                  ? Number(target.value)
+                                  : undefined,
+                              },
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                        <FormattedMessage id="iconsEditor.editor.customisation.color" />
+                      </p>
+                      <ColorPicker
+                        value={icon?.shadow?.colour}
+                        gradients={false}
+                        onChange={(c: any) => {
+                          const newIcon = {
+                            ...icon,
+                            shadow: {
+                              ...icon.shadow,
+                              colour: c,
+                            },
+                          };
+                          handleChange(index, newIcon);
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+              <PremiumOverlay />
+            </div>
+          </div>
+        )}
+      </div>
+      {totalIcons > 1 && (
+        <div className="flex flex-col gap-0.5">
+          {index !== 0 && (
+            <FontAwesomeIcon
+              icon={faCaretUp}
+              className="text-dark-200 cursor-pointer hover:text-white w-3"
+              onClick={() => onChangeOrder(index, index - 1)}
+            />
+          )}
+          {index !== totalIcons - 1 && (
+            <FontAwesomeIcon
+              icon={faCaretDown}
+              className="text-dark-200 cursor-pointer hover:text-white w-3"
+              onClick={() => onChangeOrder(index, index + 1)}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

components/editor-icons/comps/icons/index.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { PlusIcon } from "@heroicons/react/solid";
+
+import { EditorType, IconType } from "@/types/editor";
+import { Empty } from "@/components/empty";
+
+import { IconSelected } from "./icon-selected";
+import { FormattedMessage, useIntl } from "react-intl";
+
+export const Icons = ({
+  editor,
+  onChange,
+  onStep,
+}: {
+  editor: EditorType;
+  onChange: (e: EditorType) => void;
+  onStep: (step: number, multiple?: boolean) => void;
+}) => {
+  const [opened, setOpened] = useState<number | null>(0);
+  const intl = useIntl();
+
+  const handleChange = (index: number, icon: any) => {
+    const newIcons = [...editor.icons];
+    newIcons[index] = icon;
+    onChange({
+      ...editor,
+      icons: newIcons,
+    });
+  };
+
+  const handleDeleteIcon = (index: number) => {
+    const newIcons = [...editor.icons];
+    newIcons.splice(index, 1);
+    onChange({
+      ...editor,
+      icons: newIcons,
+    });
+  };
+
+  const handleChangeOrder = (index: number, value: number) => {
+    const newIcons = [...editor.icons];
+    const [removed] = newIcons.splice(index, 1);
+    newIcons.splice(value, 0, removed);
+    onChange({
+      ...editor,
+      icons: newIcons,
+    });
+  };
+
+  return (
+    <div className="grid grid-cols-1 gap-4">
+      <p className="font-bold tracking-wider text-lg text-white">
+        <FormattedMessage id="iconsEditor.editor.icons.title" />
+      </p>
+      {editor?.icons?.length > 0 ? (
+        <>
+          <div
+            className="border-2 border-dark-300 border-dashed w-full rounded-lg pl-4 py-4 pr-6 group cursor-pointer transition-all duration-200 hover:border-blue group flex items-center justify-start"
+            onClick={() => onStep(0, true)}
+          >
+            <div className="flex items-center justify-start gap-4">
+              <div className="w-10 h-10 flex items-center justify-center bg-dark-200 bg-opacity-20 rounded-lg group-hover:bg-blue transition-all duration-200">
+                <PlusIcon className="text-white w-6" />
+              </div>
+              <div>
+                <p className="text-white font-semibold">
+                  <FormattedMessage id="iconsEditor.editor.icons.add.title" />
+                </p>
+                <p className="text-xs text-dark-200">
+                  <FormattedMessage id="iconsEditor.editor.icons.add.subtitle" />
+                </p>
+              </div>
+            </div>
+          </div>
+          {editor?.icons?.map((icon: IconType, k) => {
+            return (
+              <IconSelected
+                key={k}
+                totalIcons={editor?.icons?.length}
+                index={k}
+                icon={icon}
+                current={opened}
+                setCurrent={setOpened}
+                onDelete={handleDeleteIcon}
+                onChange={handleChange}
+                onChangeOrder={handleChangeOrder}
+              />
+            );
+          })}
+        </>
+      ) : (
+        <Empty
+          title={intl.formatMessage({
+            id: "iconsEditor.editor.icons.empty.title",
+          })}
+          description={intl.formatMessage({
+            id: "iconsEditor.editor.icons.empty.subtitle",
+          })}
+          button={intl.formatMessage({
+            id: "iconsEditor.editor.icons.empty.cta",
+          })}
+          action={() => onStep(0)}
+        />
+      )}
+    </div>
+  );
+};

components/editor-icons/comps/list/index.tsx

@@ -0,0 +1,151 @@
+import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/solid";
+import { useContext, useRef } from "react";
+
+import { useResults } from "components/search/hooks/useSearch";
+import { ListItem } from "components/editor-icons/comps/list/list-item";
+import { IconItem } from "types/editor";
+import { Empty } from "components/empty";
+import { login, useUser } from "utils/auth";
+import { PremiumContext } from "components/premium/premium";
+import { Premium } from "@/components/premium";
+import classNames from "classnames";
+import { toBase64 } from "@/components/upload";
+import { FormattedMessage } from "react-intl";
+
+export const ListIcons = ({
+  onSelect,
+  onCustomText,
+  onCustomUpload,
+}: {
+  onSelect: (e: IconItem) => void;
+  onCustomText: () => void;
+  onCustomUpload: (s: string) => void;
+}) => {
+  const { user } = useUser();
+  const { setOpen } = useContext(PremiumContext);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { results, page, maxPage, totalItems, setPage } = useResults();
+
+  const handleCustomUpload = (e: any) => {
+    const file = e.target.files[0];
+    if (file) {
+      toBase64(file).then((res: any) => {
+        onCustomUpload(res);
+      });
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex flex-col lg:flex-row gap-y-3 lg:gap-y-0 items-start justify-between">
+        <p className="font-bold tracking-wider text-base text-white">
+          <FormattedMessage
+            id="iconsEditor.editor.listIcons.totalIcons"
+            values={{ total: () => totalItems }}
+          />
+        </p>
+        <input
+          ref={inputRef}
+          type="file"
+          className="hidden"
+          onChange={handleCustomUpload}
+        />
+        <div className="flex w-full lg:w-auto items-center justify-end gap-3">
+          <button
+            className={classNames(
+              "w-full lg:w-auto px-3 py-2 hover:bg-opacity-70 text-xs font-semibold text-white rounded-md flex items-center justify-center lg:justify-start gap-2",
+              {
+                "bg-dark-300": !user?.id,
+                "bg-darkGreen": user?.id,
+              }
+            )}
+            onClick={() => inputRef.current?.click()}
+          >
+            {!user && <Premium size="16" tooltip={true} />}
+            <FormattedMessage id="iconsEditor.editor.listIcons.uploadCustomIcon" />
+          </button>
+          <button
+            className={classNames(
+              "w-full lg:w-auto px-3 py-2 hover:bg-opacity-70 text-xs font-semibold text-white rounded-md flex items-center justify-center lg:justify-start gap-2",
+              {
+                "bg-dark-300": !user?.id,
+                "bg-yellow": user?.id,
+              }
+            )}
+            onClick={onCustomText}
+          >
+            {!user && <Premium size="16" tooltip={true} />}
+            <FormattedMessage id="iconsEditor.editor.listIcons.useCustomText" />
+          </button>
+        </div>
+      </div>
+      <div className="flex jlg:items-start flex-wrap justify-start mt-3 gap-2 lg:gap-3">
+        {results?.map((result: any, key: number) => (
+          <ListItem
+            key={key}
+            icon={result}
+            fill={result?.defaultColor}
+            onSelect={(icon) => {
+              // if (icon?.isPremium && !user?.id) return setOpen(true);
+              onSelect(icon);
+            }}
+          />
+        ))}
+        {results?.length === 0 && (
+          <Empty
+            title="Clyde is disappointed..."
+            description="...there is no icon that matches your search :("
+            action={() => {
+              if (!user?.id) return login();
+              // send to api a request;
+              console.log("display Modal and call API");
+            }}
+            button="Ask for a new Icon"
+          />
+        )}
+      </div>
+      {results?.length > 0 && (
+        <div className="flex items-center justify-between gap-4 mt-10">
+          <button
+            disabled={page <= 1}
+            className="w-full lg:w-auto group border-2 border-darkGreen bg-darkGreen text-white font-medium tracking-wide px-3.5 py-2 text-sm flex items-center justify-center gap-2 rounded-lg hover:bg-opacity-90 hover:border-opacity-0 disabled:bg-dark-100 disabled:bg-opacity-20 disabled:border-dark-100 disabled:border-opacity-0 disabled:text-dark-200 disabled:cursor-not-allowed"
+            onClick={() => setPage(page - 1)}
+          >
+            <ArrowLeftIcon className="w-4 text-white group-disabled:text-dark-200" />
+            <FormattedMessage
+              id="iconsEditor.editor.listIcons.pagination.previous"
+              values={{
+                span: (t) => <span className="hidden lg:inline">{t}</span>,
+              }}
+            />
+          </button>
+          <div className="hidden items-center justify-center gap-2 lg:flex">
+            <p className="text-dark-100 font-medium text-sm">
+              <FormattedMessage
+                id="iconsEditor.editor.listIcons.pagination.total"
+                values={{
+                  page: () => page,
+                  maxPage: () => maxPage,
+                }}
+              />
+            </p>
+          </div>
+          <button
+            disabled={page === maxPage}
+            className="w-full lg:w-auto group border-2 border-darkGreen bg-darkGreen text-white font-medium tracking-wide px-3.5 py-2 text-sm flex items-center justify-center gap-2 rounded-lg hover:bg-opacity-90 hover:border-opacity-0 disabled:bg-dark-100 disabled:bg-opacity-20 disabled:border-dark-100 disabled:border-opacity-0 disabled:text-dark-200 disabled:cursor-not-allowed"
+            onClick={page >= maxPage ? () => {} : () => setPage(page + 1)}
+          >
+            <FormattedMessage
+              id="iconsEditor.editor.listIcons.pagination.next"
+              values={{
+                span: (t) => <span className="hidden lg:inline">{t}</span>,
+              }}
+            />
+            <ArrowRightIcon className="w-4 text-white group-disabled:text-dark-200" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

components/editor-icons/comps/list/list-item.tsx

@@ -0,0 +1,86 @@
+import classNames from "classnames";
+import React, { useEffect, useRef } from "react";
+
+export const ListItem = ({
+  icon,
+  tooltip = true,
+  hoverable = true,
+  fill = "#b0b0b0",
+  onSelect,
+}: {
+  icon: any;
+  tooltip?: boolean;
+  hoverable?: boolean;
+  fill?: string;
+  onSelect: (e: any) => void;
+}) => {
+  const ref = useRef<any>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [viewBox, setViewBox] = React.useState<string>("0 0 24 24");
+  const renderComponent = () => {
+    const Component = icon?.component as any;
+    return <Component ref={ref} />;
+  };
+
+  useEffect(() => {
+    return setViewBox(ref?.current?.getAttribute("viewBox") ?? "0 0 200 200");
+  });
+
+  return (
+    <div
+      className={classNames(
+        "flex items-center justify-center p-2 cursor-pointer rounded-lg relative group border border-dark-200 border-solid",
+        {
+          "hover:border-yellow": hoverable && icon?.isPremium,
+          "hover:border-dark-100": hoverable && !icon?.isPremium,
+        }
+      )}
+      onClick={() => onSelect(icon)}
+    >
+      {/* {icon?.isPremium && (
+        <div className="w-4 h-4 bg-yellow rounded-full absolute -right-1.5 -top-1 border-[2px] border-dark-500" />
+      )} */}
+      <svg
+        width={24}
+        height={24}
+        fill={fill}
+        ref={svgRef}
+        viewBox={viewBox}
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-auto"
+      >
+        {renderComponent()}
+      </svg>
+      {hoverable && (
+        <div
+          className={classNames(
+            "group-hover:opacity-100 bg-opacity-20 opacity-0 rounded-lg transition-all duration-200 absolute h-full w-full left-0 top-0 pointer-events-none transform translate-y-full group-hover:translate-y-0",
+            {
+              "bg-yellow": icon?.isPremium,
+              "bg-dark-100": !icon?.isPremium,
+            }
+          )}
+        />
+      )}
+      {/* {tooltip && (
+        <>
+          <div
+            className={classNames(
+              "group-hover:opacity-100 bg-opacity-20 opacity-0 rounded-lg transition-all duration-200 absolute h-full w-full left-0 top-0 pointer-events-none transform translate-y-full group-hover:translate-y-0",
+              {
+                "bg-yellow": icon?.isPremium,
+                "bg-dark-100": !icon?.isPremium,
+              }
+            )}
+          />
+          <div className="opacity-0 transform z-10 pt-1 translate-y-full pointer-events-none group-hover:opacity-100 absolute bottom-0 flex items-center justify-center flex-col">
+            <div className="w-[0px] h-[0px] border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-b-[5px] border-b-dark-600 border-opacity-80" />
+            <div className="bg-dark-600 bg-opacity-80 text-xs text-white rounded py-0.5 px-1.5 whitespace-nowrap">
+              {icon?.tags?.join(", ")}
+            </div>
+          </div>
+        </>
+      )} */}
+    </div>
+  );
+};

components/editor-icons/comps/shapes/index.tsx

@@ -0,0 +1,98 @@
+import { useContext } from "react";
+
+import { EditorType } from "types/editor";
+import { SHAPES } from "components/svg/shapes";
+import classNames from "classnames";
+import { Empty } from "@/components/empty";
+import { useUser } from "@/utils/auth";
+
+import { ShapeSelected } from "./shape-selected";
+import { PremiumContext } from "@/components/premium/premium";
+import { FormattedMessage, useIntl } from "react-intl";
+
+export const Shapes = ({
+  editor,
+  onChange,
+}: {
+  editor: EditorType;
+  onChange: (s: any) => void;
+}) => {
+  const { user } = useUser();
+  const intl = useIntl();
+
+  const { setOpen } = useContext(PremiumContext);
+
+  return (
+    <>
+      <p className="font-bold tracking-wider text-lg text-white mb-3">
+        <FormattedMessage id="iconsEditor.editor.shape.title" />
+      </p>
+      <div className="flex items-start flex-wrap justify-start mt-3 gap-3">
+        {SHAPES.map((shape, k) => (
+          <div
+            key={k}
+            className={classNames(
+              "relative flex items-center justify-center p-2 cursor-pointer rounded-lg group border border-dark-200 border-solid",
+              {
+                "bg-blue border-blue": editor.shape?.component === shape?.name,
+                // "hover:border-yellow": shape?.isPremium,
+              }
+            )}
+            onClick={() => {
+              // if (!user && shape?.isPremium) {
+              //   return setOpen(true);
+              // }
+              onChange({ ...editor.shape, component: shape?.name });
+            }}
+          >
+            {/* {shape?.isPremium && (
+              <div className="w-4 h-4 bg-yellow rounded-full absolute -right-1.5 -top-1 border-[2px] border-dark-500" />
+            )} */}
+            <_ShapeComponent
+              component={shape.component}
+              width={28}
+              height={28}
+              shape={shape}
+            />
+            <div
+              className={classNames(
+                "group-hover:opacity-100 bg-opacity-20 opacity-0 rounded-lg transition-all duration-200 absolute h-full w-full left-0 top-0 pointer-events-none transform translate-y-full group-hover:translate-y-0",
+                {
+                  // "bg-yellow": shape?.isPremium,
+                  "bg-dark-100": !shape?.isPremium,
+                }
+              )}
+            />
+          </div>
+        ))}
+      </div>
+      {editor.shape?.component ? (
+        <ShapeSelected
+          shape={editor?.shape}
+          handleChange={(shape: any) => onChange({ ...editor.shape, ...shape })}
+          onDelete={() => onChange({ ...editor.shape, component: null })}
+        />
+      ) : (
+        <Empty
+          title={intl.formatMessage({
+            id: "iconsEditor.editor.shape.empty.title",
+          })}
+          description={intl.formatMessage({
+            id: "iconsEditor.editor.shape.empty.subtitle",
+          })}
+          className="mt-12"
+          // button={<div onClick={() => onStep(0)}>Add my first Icon</div>}
+        />
+      )}
+    </>
+  );
+};
+
+const _ShapeComponent = ({ component, shape, onClick, ...props }: any) => {
+  const ShapeComponent = component as any;
+  const newShape = {
+    ...shape,
+    component: `${shape.name}-small`,
+  };
+  return <ShapeComponent shape={newShape} {...props} />;
+};

components/editor-icons/comps/shapes/shape-selected.tsx

@@ -0,0 +1,307 @@
+import classNames from "classnames";
+import { useState } from "react";
+import {
+  faChevronDown,
+  faChevronRight,
+  faTrash,
+  faCaretDown,
+  faCaretUp,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ColorPicker } from "components/color-picker";
+import { Range } from "components/range";
+import { UploadImage } from "@/components/upload";
+import { Switch } from "@/components/switch";
+import { login, useUser } from "@/utils/auth";
+import { Premium } from "@/components/premium";
+import { PremiumOverlay } from "@/components/premium/overlay";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Label } from "@/components/label";
+
+export const ShapeSelected = ({
+  shape,
+  handleChange,
+  onDelete,
+}: {
+  shape: any;
+  handleChange: (s: any) => void;
+  onDelete: () => void;
+}) => {
+  const { user } = useUser();
+  const intl = useIntl();
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div
+      className={classNames(
+        "mt-5 bg-dark-600 w-full rounded-lg pl-4 py-4 pr-6 cursor-pointer transition-all border-2 border-dark-600 duration-200 hover:border-blue",
+        {
+          "border-blue": open,
+        }
+      )}
+    >
+      <div
+        className="tracking-wider flex items-center justify-between gap-4"
+        onClick={() => setOpen(!open)}
+      >
+        <p className="text-white font-semibold">
+          <FormattedMessage id="iconsEditor.editor.shape.update.title" />
+        </p>
+        <div className="flex items-center justify-end gap-4">
+          <div
+            className="bg-danger bg-opacity-60 rounded-lg text-white hover:bg-opacity-100 cursor-pointer w-8 h-8 flex items-center justify-center"
+            onClick={(e: any) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onDelete();
+            }}
+          >
+            <FontAwesomeIcon icon={faTrash} className="w-4" />
+          </div>
+          <div className="w-4 flex items-center justify-end">
+            <FontAwesomeIcon
+              icon={open ? faChevronDown : faChevronRight}
+              className="text-dark-100 transition-all duration-200"
+            />
+          </div>
+        </div>
+      </div>
+      {open && (
+        <div className="border-t border-dark-400 pt-3 mt-4 grid grid-cols-2 gap-4">
+          <div className="w-full col-span-2">
+            <Label className="!mb-2">
+              <FormattedMessage id="iconsEditor.editor.customisation.rotation" />
+            </Label>
+            <div className="flex items-center gap-3 w-full">
+              <p className="font-semibold uppercase text-dark-200 text-xs">Z</p>
+              <Range
+                value={shape?.position?.angle ?? 0}
+                max={360}
+                onChange={(value) => {
+                  const newShape = {
+                    ...shape,
+                    position: { ...shape.position, angle: Number(value) },
+                  };
+                  handleChange(newShape);
+                }}
+              />
+              <input
+                type="number"
+                className="w-full bg-dark-500 rounded px-2 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                placeholder={intl.formatMessage({
+                  id: "iconsEditor.editor.customisation.angle",
+                })}
+                value={shape?.position?.angle}
+                onChange={({ target }) => {
+                  const newShape = {
+                    ...shape,
+                    position: {
+                      ...shape.position,
+                      angle: target.value
+                        ? Number(target.value) > 360
+                          ? 360
+                          : Number(target.value)
+                        : undefined,
+                    },
+                  };
+                  handleChange(newShape);
+                }}
+              />
+            </div>
+          </div>
+          {shape?.component === "Square" && (
+            <div className="w-full col-span-2">
+              <Label className="!mb-2">
+                <FormattedMessage id="iconsEditor.editor.customisation.radius" />
+              </Label>
+              <div className="flex items-center gap-3 w-full">
+                <p className="font-semibold uppercase text-dark-200 text-xs">
+                  Z
+                </p>
+                <Range
+                  value={shape?.radius ?? 0}
+                  max={120}
+                  onChange={(value) => {
+                    const newShape = {
+                      ...shape,
+                      radius: Number(value),
+                    };
+                    handleChange(newShape);
+                  }}
+                />
+                <input
+                  type="number"
+                  className="w-full bg-dark-500 rounded px-2 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                  placeholder={intl.formatMessage({
+                    id: "iconsEditor.editor.customisation.angle",
+                  })}
+                  value={shape?.radius}
+                  onChange={({ target }) => {
+                    const newShape = {
+                      ...shape,
+                      radius: Number(target.value),
+                    };
+                    handleChange(newShape);
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          <div className="col-span-2">
+            <div className="flex items-center justify-start gap-3 mb-2.5 ">
+              <Label className="">
+                <FormattedMessage
+                  id="iconsEditor.editor.customisation.gradientColor"
+                  values={{
+                    span: (t) => (
+                      <span className="text-xs opacity-40">{t}</span>
+                    ),
+                  }}
+                />
+              </Label>
+              <Switch
+                value={!shape?.transparency}
+                onChange={(transparency: boolean) => {
+                  const newShape = {
+                    ...shape,
+                    transparency: !transparency,
+                  };
+                  handleChange(newShape);
+                }}
+              />
+            </div>
+            <ColorPicker
+              value={shape?.stringColor ?? shape?.colour}
+              data={shape}
+              onChange={(c: any, datas) => {
+                let newShape = { ...shape, stringColor: c };
+                if (c.includes("gradient")) {
+                  const { colors, degrees } = datas;
+                  const gradientType = c?.startsWith("linear")
+                    ? "linearGradient"
+                    : "radialGradient";
+
+                  const angle = c?.startsWith("linear")
+                    ? c?.replace("linear-gradient(", "")?.split("deg")?.[0]
+                    : 90;
+
+                  newShape["gradient"] = {
+                    ...newShape.gradient,
+                    enabled: true,
+                    colours: colors,
+                    angle,
+                    type: gradientType,
+                  };
+                } else {
+                  newShape = {
+                    ...newShape,
+                    colour: c,
+                    gradient: {
+                      ...shape?.gradient,
+                      enabled: false,
+                    },
+                  };
+                }
+
+                handleChange(newShape);
+              }}
+            />
+          </div>
+          <div className="col-span-2 grid grid-cols-2 gap-4 relative">
+            <div className="col-span-2">
+              <div className="flex items-center justify-start gap-3 mb-2.5 ">
+                <Label className="">
+                  <FormattedMessage id="iconsEditor.editor.customisation.backgroundImage" />
+                </Label>
+                <Switch
+                  value={shape?.image?.enabled}
+                  onChange={(enabled: boolean) => {
+                    const newShape = {
+                      ...shape,
+                      image: {
+                        ...shape.image,
+                        enabled,
+                      },
+                    };
+                    handleChange(newShape);
+                  }}
+                />
+              </div>
+              {shape?.image?.enabled && (
+                <UploadImage
+                  values={shape?.image?.urls}
+                  onChange={(urls: string) => {
+                    const newShape = {
+                      ...shape,
+                      image: {
+                        ...shape.image,
+                        urls,
+                      },
+                    };
+                    handleChange(newShape);
+                  }}
+                />
+              )}
+            </div>
+            <div>
+              <Label className="!mb-2.5">
+                <FormattedMessage id="iconsEditor.editor.customisation.border" />
+              </Label>
+              <div className="flex items-start justify-start gap-5">
+                <div className="w-full">
+                  <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                    <FormattedMessage id="iconsEditor.editor.customisation.width" />
+                  </p>
+                  <input
+                    type="number"
+                    className="bg-dark-500 w-full rounded px-4 py-2 text-sm text-white placeholder-dark-200 outline-none border-none"
+                    placeholder={
+                      intl.formatMessage({
+                        id: "iconsEditor.editor.customisation.width",
+                      }) + "...px"
+                    }
+                    min={0}
+                    value={shape?.border?.width}
+                    onChange={({ target }) => {
+                      const newShape = {
+                        ...shape,
+                        border: {
+                          ...shape.border,
+                          width: target?.value
+                            ? Number(target.value)
+                            : undefined,
+                        },
+                      };
+                      handleChange(newShape);
+                    }}
+                  />
+                </div>
+                <div>
+                  <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
+                    <FormattedMessage id="iconsEditor.editor.customisation.color" />
+                  </p>
+                  <ColorPicker
+                    value={shape?.border?.colour}
+                    gradients={false}
+                    onChange={(c: any) => {
+                      const newShape = {
+                        ...shape,
+                        border: {
+                          ...shape.border,
+                          colour: c,
+                        },
+                      };
+                      handleChange(newShape);
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+            <PremiumOverlay />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

components/editor-icons/comps/tabs.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import classNames from "classnames";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faSearch,
+  faArrowsUpDownLeftRight,
+  faPalette,
+  faShapes,
+  faIcons,
+} from "@fortawesome/free-solid-svg-icons";
+import { FormattedMessage } from "react-intl";
+
+const TABS_ELEMENTS = [
+  {
+    icon: faSearch,
+    name: "iconsEditor.editor.tabs.listIcons",
+  },
+  {
+    icon: faShapes,
+    name: "iconsEditor.editor.tabs.shape",
+  },
+  {
+    icon: faIcons,
+    name: "iconsEditor.editor.tabs.icons",
+  },
+];
+
+export const EditorTabs = ({
+  current,
+  onChange,
+}: {
+  current: number;
+  onChange: (e: number) => void;
+}) => {
+  return (
+    // p-2 lg:p-4
+    <div className="bg-dark-600 rounded-t-2xl lg:rounded-r-none">
+      <ul className="w-full relative z-1 grid grid-cols-3">
+        {TABS_ELEMENTS.map((tab, index) => (
+          <li
+            key={index}
+            className={classNames(
+              "hover:bg-blue hover:bg-opacity-50 flex items-center gap-5 lg:gap-4 cursor-pointer text-white text-left text-xs lg:text-sm font-semibold tracking-wide p-4 lg:p-5 justify-center uppercase",
+              {
+                "bg-dark-500 hover:!bg-dark-500 hover:!bg-opacity-100":
+                  current === index,
+                "second-step rounded-t-2xl rounded-r-none": index === 0,
+                "third-step": index === 1,
+                "fourth-step rounded-t-2xl lg:rounded-t-none rounded-l-none":
+                  index === 2,
+              }
+            )}
+            onClick={() => onChange(index)}
+          >
+            <FontAwesomeIcon icon={tab.icon} className="w-4 min-w-[1rem]" />
+            <p>
+              <FormattedMessage id={tab.name} />
+            </p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};