create settings

src/components/Modal/index.tsx

@@ -50,8 +50,10 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> & ModalTypes = ({
     }
   };
 
+  if (!visible) return null;
+
   return (
-    <Styled.ModalWrapper visible={visible} onClick={onClick}>
+    <Styled.ModalWrapper onClick={onClick}>
       <Styled.ModalInnerWrapper>{children}</Styled.ModalInnerWrapper>
     </Styled.ModalWrapper>
   );

src/components/Modal/styles.tsx

@@ -5,13 +5,13 @@ const appearAnimation = keyframes`
   to { transform: scale(1); opacity: 1; };
 `;
 
-export const ModalWrapper = styled.div<{ visible: boolean }>`
+export const ModalWrapper = styled.div`
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100%;
-  display: ${({ visible }) => (visible ? "flex" : "none")};
+  display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.85);

src/components/Toggle/index.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import styled from "styled-components";
+import { IoIosCheckmarkCircle, IoMdCloseCircle } from "react-icons/io";
+
+const StyledToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  user-select: none;
+  width: 100%;
+  gap: 6px;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
+  font-weight: 500;
+  cursor: pointer;
+`;
+
+const StyledToggle = styled.div<{ active: boolean }>`
+  position: relative;
+  display: flex;
+  justify-content: ${({ active }) => (active ? "right" : "left")};
+  align-items: center;
+  width: 40px;
+  height: 24px;
+  padding: 2px;
+  border-radius: 14px;
+  background: ${({ active }) => (active ? "#3AA55D" : "#72767c")};
+  cursor: pointer;
+
+  transition: 0.1s;
+
+  input {
+    display: none;
+  }
+`;
+
+const Toggle: React.FC<{ children: string }> = ({ children }) => {
+  const [isActive, setIsActive] = React.useState(false);
+  const id = React.useId();
+
+  return (
+    <StyledToggleWrapper>
+      <StyledToggle active={isActive} onClick={() => setIsActive((a) => !a)}>
+        {isActive ? (
+          <IoIosCheckmarkCircle size={22} color="white" />
+        ) : (
+          <IoMdCloseCircle size={22} color="white" />
+        )}
+        <input
+          type="checkbox"
+          defaultChecked={isActive}
+          onChange={() => setIsActive((c) => !c)}
+        />
+      </StyledToggle>
+      <StyledLabel onClick={() => setIsActive((c) => !c)}>
+        {children}
+      </StyledLabel>
+    </StyledToggleWrapper>
+  );
+};
+
+export default Toggle;

src/containers/Editor/Settings.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Modal } from "src/components/Modal";
+import Toggle from "src/components/Toggle";
+
+export const Settings: React.FC<{
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({ visible, setVisible }) => {
+  return (
+    <Modal visible={visible} setVisible={setVisible}>
+      <Modal.Header>Settings</Modal.Header>
+      <Modal.Content>
+        <Toggle>Test The Toggle</Toggle>
+      </Modal.Content>
+      <Modal.Controls setVisible={setVisible} />
+    </Modal>
+  );
+};

src/containers/Editor/Tools.tsx

@@ -12,6 +12,8 @@ import { SearchInput } from "src/containers/SearchInput";
 import { useConfig } from "src/hocs/config";
 import { ConfigActionType } from "src/reducer/reducer";
 import styled from "styled-components";
+import { TbSettings } from "react-icons/tb";
+import { Settings } from "./Settings";
 
 export const StyledTools = styled.div`
   display: flex;
@@ -41,6 +43,7 @@ const StyledToolElement = styled.button`
 `;
 
 export const Tools: React.FC = () => {
+  const [settingsVisible, setSettingsVisible] = React.useState(false);
   const { settings, dispatch } = useConfig();
 
   const zoomIn = () => dispatch({ type: ConfigActionType.ZOOM_IN });
@@ -65,6 +68,12 @@ export const Tools: React.FC = () => {
       <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
         <AiOutlineFullscreen />
       </StyledToolElement>
+      <StyledToolElement
+        aria-label="settings"
+        onClick={() => setSettingsVisible(true)}
+      >
+        <TbSettings />
+      </StyledToolElement>
       <StyledToolElement aria-label="switch theme" onClick={toggleTheme}>
         {settings.lightmode ? <HiOutlineMoon /> : <HiOutlineSun />}
       </StyledToolElement>
@@ -83,6 +92,7 @@ export const Tools: React.FC = () => {
       <StyledToolElement aria-label="zoom in" onClick={zoomIn}>
         <AiOutlinePlus />
       </StyledToolElement>
+      <Settings visible={settingsVisible} setVisible={setSettingsVisible} />
     </StyledTools>
   );
 };

src/containers/ImportModal/index.tsx

@@ -97,13 +97,6 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
     }
   };
 
-  React.useEffect(() => {
-    return () => {
-      setJsonFile(null);
-      setURL("");
-    };
-  }, [visible]);
-
   return (
     <Modal visible={visible} setVisible={setVisible}>
       <Modal.Header>Import JSON</Modal.Header>

yarn.lock

@@ -5593,12 +5593,12 @@ react-cool-dimensions@^2.0.7:
   integrity sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA==
 
 react-dom@^18.0.0:
-  version "18.1.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
-  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.22.0"
+    scheduler "^0.23.0"
 
 react-fast-compare@^3.2.0:
   version "3.2.0"
@@ -5613,9 +5613,9 @@ react-hot-toast@^2.2.0:
     goober "^2.1.1"
 
 react-icons@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
-  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
+  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
@@ -5662,9 +5662,9 @@ react-zoom-pan-pinch@^2.1.3:
   integrity sha512-a5AChOWhjo0RmxsNZXGQIlNh3e3nLU6m4V6M+6dlbPNk5d+MtMxgKWyA5zpR06Lp3OZkZVF9nR8JeWSvKwck9g==
 
 react@^18.0.0:
-  version "18.1.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
-  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -5927,10 +5927,10 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.22.0:
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
-  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"