set toggle

Author: penicillin0

package.json

@@ -33,6 +33,7 @@
     "react-icons": "^4.3.1",
     "react-scripts": "4.0.3",
     "react-select": "^5.2.1",
+    "react-switch": "^6.0.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.0.1"
   },

src/components/Console.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Select, { ActionMeta, SingleValue } from 'react-select';
+import Switch from 'react-switch';
 import styled from 'styled-components';
 
 const options = [
@@ -78,7 +79,26 @@ export const Console: React.FC<Props> = () => {
 
   return (
     <MainContainer>
-      <Title>Select Favorite List Maker</Title>
+      <TitleWrapper>
+        <Title>Select Favorite List Maker</Title>
+        <SwitchLabel>
+          <Switch
+            checked={true}
+            onChange={() => {
+              console.log('aaa');
+            }}
+            onColor="#00b428"
+            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
+            height={16}
+            width={28}
+            handleDiameter={18}
+            checkedIcon={false}
+            uncheckedIcon={false}
+          />
+          <Spacer width={6} />
+          <span>Indent Coloring</span>
+        </SwitchLabel>
+      </TitleWrapper>
       <IndentContainer>
         {indentOptions.map((indentOption) => {
           const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
@@ -102,7 +122,6 @@ export const Console: React.FC<Props> = () => {
           );
         })}
       </IndentContainer>
-
       <DemonstrationContainer>
         <Demonstration>
           <Title>Demonstration</Title>
@@ -134,12 +153,27 @@ const MainContainer = styled.div`
   padding-bottom: 8px;
 `;
 
+const Spacer = styled.div<{ width: number }>`
+  width: ${(props) => props.width}px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 const Title = styled.div`
   font-size: 16px;
   text-align: left;
   margin: 12px 10px;
 `;
 
+const SwitchLabel = styled.label`
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+`;
+
 const Label = styled.div`
   font-size: 14px;
   margin-left: 12px;

yarn.lock

@@ -9543,6 +9543,13 @@ react-select@*, react-select@^5.2.1:
     prop-types "^15.6.0"
     react-transition-group "^4.3.0"
 
+react-switch@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-6.0.0.tgz#bd4a2dea08f211b8a32e55e8314fd44bc1ec947e"
+  integrity sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-transition-group@^4.3.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"