AppCatalog: Adds comp and story for EnableSwitch

Signed-off-by: Vincent T <[email protected]>

app-catalog/src/components/settings/EnableSwitch.Stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { EnableSwitch } from './EnableSwitch';
+
+export default {
+    title: 'Components/EnableSwitch',
+    component: EnableSwitch,
+} as Meta;
+
+const Template: Story = (args) => <EnableSwitch {...args} />;
+
+export const CheckedTrue = Template.bind({});
+CheckedTrue.args = {
+    checked: true,
+};
+
+export const CheckedFalse = Template.bind({});
+CheckedFalse.args = {
+    checked: false,
+};

app-catalog/src/components/settings/EnableSwitch.tsx

@@ -0,0 +1,60 @@
+import { Switch, SwitchProps, useTheme } from '@mui/material';
+
+export function EnableSwitch(props: SwitchProps) {
+    const theme = useTheme();
+
+    return (
+        <Switch
+            focusVisibleClassName=".Mui-focusVisible"
+            disableRipple
+            sx={{
+                width: 42,
+                height: 26,
+                padding: 0,
+                '& .MuiSwitch-switchBase': {
+                    padding: 0,
+                    margin: '2px',
+
+                    transitionDuration: '300ms',
+                    '&.Mui-checked': {
+                        transform: 'translateX(16px)',
+                        color: '#fff',
+                        '& + .MuiSwitch-track': {
+                            backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#0078d4',
+                            opacity: 1,
+                            border: 0,
+                        },
+                        '&.Mui-disabled + .MuiSwitch-track': {
+                            opacity: 0.5,
+                        },
+                    },
+                    '&.Mui-focusVisible .MuiSwitch-thumb': {
+                        color: '#33cf4d',
+                        border: '6px solid #fff',
+                    },
+                    '&.Mui-disabled .MuiSwitch-thumb': {
+                        color:
+                            theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+                    },
+                    '&.Mui-disabled + .MuiSwitch-track': {
+                        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+                    },
+                },
+                '& .MuiSwitch-thumb': {
+                    boxSizing: 'border-box',
+                    width: 22,
+                    height: 22,
+                },
+                '& .MuiSwitch-track': {
+                    borderRadius: 26 / 2,
+                    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+                    opacity: 1,
+                    transition: theme.transitions.create(['background-color'], {
+                        duration: 500,
+                    }),
+                },
+            }}
+            {...props}
+        />
+    );
+};