move performance mode to settings

src/components/Sidebar/index.tsx

@@ -129,10 +129,6 @@ function rotateLayout(layout: CanvasDirection) {
   return 360;
 }
 
-const StyledAlertIcon = styled(IoAlertCircleSharp)`
-  color: ${({ theme }) => theme.ORANGE};
-`;
-
 export const Sidebar: React.FC = () => {
   const { json, settings, dispatch } = useConfig();
   const router = useRouter();
@@ -153,19 +149,6 @@ export const Sidebar: React.FC = () => {
     toast(`${settings.expand ? "Collapsed" : "Expanded"} nodes.`);
   };
 
-  const togglePerformance = () => {
-    const toastMsg = settings.performance
-      ? "Disabled Performance Mode\nSearch Node & Save Image enabled."
-      : "Enabled Performance Mode\nSearch Node & Save Image disabled.";
-
-    toast(toastMsg, {
-      icon: <StyledAlertIcon size={36} />,
-      duration: 3000,
-    });
-
-    dispatch({ type: ConfigActionType.TOGGLE_PERFORMANCE });
-  };
-
   return (
     <StyledSidebar>
       <StyledTopWrapper>
@@ -207,17 +190,6 @@ export const Sidebar: React.FC = () => {
             <AiOutlineSave />
           </StyledElement>
         </Tooltip>
-        <Tooltip
-          title={`${
-            settings.performance ? "Disable" : "Enable"
-          } Performance Mode (Beta)`}
-        >
-          <StyledElement onClick={togglePerformance} beta>
-            <CgPerformance
-              color={settings.performance ? "#0073FF" : undefined}
-            />
-          </StyledElement>
-        </Tooltip>
       </StyledTopWrapper>
       <StyledBottomWrapper>
         <StyledElement>

src/components/Toggle/index.tsx

@@ -2,6 +2,12 @@ import React from "react";
 import styled from "styled-components";
 import { IoIosCheckmarkCircle, IoMdCloseCircle } from "react-icons/io";
 
+interface ToggleProps {
+  checked?: boolean;
+  children?: React.ReactNode;
+  onChange?: () => void;
+}
+
 const StyledToggleWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -26,36 +32,37 @@ const StyledToggle = styled.div<{ active: boolean }>`
   padding: 2px;
   border-radius: 14px;
   background: ${({ active }) => (active ? "#3AA55D" : "#72767c")};
-  cursor: pointer;
-
   transition: 0.1s;
+  cursor: pointer;
 
   input {
     display: none;
   }
 `;
 
-const Toggle: React.FC<{ children: string }> = ({ children }) => {
-  const [isActive, setIsActive] = React.useState(false);
-  const id = React.useId();
+const Toggle: React.FC<ToggleProps> = ({
+  children,
+  checked = false,
+  onChange,
+}) => {
+  const [isChecked, setIsChecked] = React.useState(checked);
+
+  const handleClick = () => {
+    setIsChecked(!isChecked);
+    if (onChange) onChange();
+  };
 
   return (
     <StyledToggleWrapper>
-      <StyledToggle active={isActive} onClick={() => setIsActive((a) => !a)}>
-        {isActive ? (
+      <StyledToggle active={isChecked} onClick={handleClick}>
+        {isChecked ? (
           <IoIosCheckmarkCircle size={22} color="white" />
         ) : (
           <IoMdCloseCircle size={22} color="white" />
         )}
-        <input
-          type="checkbox"
-          defaultChecked={isActive}
-          onChange={() => setIsActive((c) => !c)}
-        />
+        <input type="checkbox" checked={isChecked} onChange={handleClick} />
       </StyledToggle>
-      <StyledLabel onClick={() => setIsActive((c) => !c)}>
-        {children}
-      </StyledLabel>
+      <StyledLabel onClick={handleClick}>{children}</StyledLabel>
     </StyledToggleWrapper>
   );
 };

src/containers/Editor/Settings.tsx

@@ -1,16 +1,50 @@
 import React from "react";
+import toast from "react-hot-toast";
+import { IoAlertCircleSharp } from "react-icons/io5";
 import { Modal } from "src/components/Modal";
 import Toggle from "src/components/Toggle";
+import { useConfig } from "src/hocs/config";
+import { ConfigActionType } from "src/reducer/reducer";
+import styled from "styled-components";
+
+const StyledToggle = styled(Toggle)`
+  flex-flow: row-reverse;
+  background: black;
+`;
+
+const StyledAlertIcon = styled(IoAlertCircleSharp)`
+  color: ${({ theme }) => theme.ORANGE};
+`;
 
 export const Settings: React.FC<{
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }> = ({ visible, setVisible }) => {
+  const { settings, dispatch } = useConfig();
+
+  const togglePerformance = () => {
+    const toastMsg = settings.performance
+      ? "Disabled Performance Mode\nSearch Node & Save Image enabled."
+      : "Enabled Performance Mode\nSearch Node & Save Image disabled.";
+
+    toast(toastMsg, {
+      icon: <StyledAlertIcon size={36} />,
+      duration: 3000,
+    });
+
+    dispatch({ type: ConfigActionType.TOGGLE_PERFORMANCE });
+  };
+
   return (
     <Modal visible={visible} setVisible={setVisible}>
       <Modal.Header>Settings</Modal.Header>
       <Modal.Content>
-        <Toggle>Test The Toggle</Toggle>
+        <StyledToggle
+          onChange={togglePerformance}
+          checked={settings.performance}
+        >
+          Performance Mode (Experimental)
+        </StyledToggle>
       </Modal.Content>
       <Modal.Controls setVisible={setVisible} />
     </Modal>