refactor: applied changes requested on PR

xgeekshq · Dec 12, 2022 · add27be · add27be
1 parent 95628f1
commit add27be
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git a/...end/src/components/Board/Settings/partials/ConfigurationSettings/SwitchThumbComponent.tsx b/...end/src/components/Board/Settings/partials/ConfigurationSettings/SwitchThumbComponent.tsx
@@ -0,0 +1,25 @@
+import Icon from '@/components/icons/Icon';
+import { SwitchThumb } from '@/components/Primitives/Switch';
+
+type Props = {
+  isChecked: boolean;
+  iconName: string;
+  color: string | undefined;
+};
+
+const SwitchThumbComponent = ({ isChecked, iconName, color }: Props) => (
+  <SwitchThumb variant="sm">
+    {isChecked && (
+      <Icon
+        name={iconName}
+        css={{
+          width: '$10',
+          height: '$10',
+          color: color || '$successBase',
+        }}
+      />
+    )}
+  </SwitchThumb>
+);
+
+export default SwitchThumbComponent;
diff --git a/frontend/src/components/Board/Settings/partials/ConfigurationSettings/index.tsx b/frontend/src/components/Board/Settings/partials/ConfigurationSettings/index.tsx
@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 
-import Icon from '@/components/icons/Icon';
 import Flex from '@/components/Primitives/Flex';
-import { Switch, SwitchThumb } from '@/components/Primitives/Switch';
+import { Switch } from '@/components/Primitives/Switch';
 import Text from '@/components/Primitives/Text';
 import Tooltip from '@/components/Primitives/Tooltip';
+import SwitchThumbComponent from './SwitchThumbComponent';
 
 type Props = {
   title: string;
@@ -37,36 +37,14 @@ const ConfigurationSettings = ({
             onCheckedChange={handleCheckedChange}
             disabled={disabled}
           >
-            <SwitchThumb variant="sm">
-              {isChecked && (
-                <Icon
-                  name="check"
-                  css={{
-                    width: '$10',
-                    height: '$10',
-                    color: color || '$successBase',
-                  }}
-                />
-              )}
-            </SwitchThumb>
+            <SwitchThumbComponent isChecked={isChecked} iconName="check" color={color} />
           </Switch>
         </Flex>
       </Tooltip>
     )}
     {!styleVariant && (
       <Switch checked={isChecked} variant="sm" onCheckedChange={handleCheckedChange}>
-        <SwitchThumb variant="sm">
-          {isChecked && (
-            <Icon
-              name="check"
-              css={{
-                width: '$10',
-                height: '$10',
-                color: color || '$successBase',
-              }}
-            />
-          )}
-        </SwitchThumb>
+        <SwitchThumbComponent isChecked={isChecked} iconName="check" color={color} />
       </Switch>
     )}
     <Flex direction="column">