feat(striker-ui): add SwitchWithLabel

striker-ui/components/SwitchWithLabel.tsx

@@ -0,0 +1,56 @@
+import { Switch, SxProps, Theme } from '@mui/material';
+import { FC, useMemo } from 'react';
+
+import { GREY } from '../lib/consts/DEFAULT_THEME';
+
+import FlexBox from './FlexBox';
+import { BodyText } from './Text';
+
+const SwitchWithLabel: FC<SwitchWithLabelProps> = ({
+  checked: isChecked,
+  flexBoxProps: { sx: flexBoxSx, ...restFlexBoxProps } = {},
+  id: switchId,
+  label,
+  name: switchName,
+  onChange,
+  switchProps,
+}) => {
+  const combinedFlexBoxSx = useMemo<SxProps<Theme>>(
+    () => ({
+      '& > :first-child': {
+        flexGrow: 1,
+      },
+
+      ...flexBoxSx,
+    }),
+    [flexBoxSx],
+  );
+
+  const labelElement = useMemo(
+    () =>
+      typeof label === 'string' ? (
+        <BodyText inheritColour color={`${GREY}9F`}>
+          {label}
+        </BodyText>
+      ) : (
+        label
+      ),
+    [label],
+  );
+
+  return (
+    <FlexBox row {...restFlexBoxProps} sx={combinedFlexBoxSx}>
+      {labelElement}
+      <Switch
+        checked={isChecked}
+        edge="end"
+        id={switchId}
+        name={switchName}
+        onChange={onChange}
+        {...switchProps}
+      />
+    </FlexBox>
+  );
+};
+
+export default SwitchWithLabel;

striker-ui/types/SwitchWithLabel.d.ts

@@ -0,0 +1,12 @@
+type SwitchWithLabelOptionalProps = {
+  flexBoxProps?: import('../components/FlexBox').FlexBoxProps;
+  switchProps?: import('@mui/material').SwitchProps;
+};
+
+type SwitchWithLabelProps = SwitchWithLabelOptionalProps &
+  Pick<
+    import('@mui/material').SwitchProps,
+    'checked' | 'id' | 'name' | 'onChange'
+  > & {
+    label: import('react').ReactNode;
+  };