From 0c966aa7b62eebe70dc9e53ee7866fa781cba9ca Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 17 Feb 2023 00:55:25 -0500
Subject: [PATCH] feat(striker-ui): add SwitchWithLabel

---
 striker-ui/components/SwitchWithLabel.tsx | 56 +++++++++++++++++++++++
 striker-ui/types/SwitchWithLabel.d.ts     | 12 +++++
 2 files changed, 68 insertions(+)
 create mode 100644 striker-ui/components/SwitchWithLabel.tsx
 create mode 100644 striker-ui/types/SwitchWithLabel.d.ts

diff --git a/striker-ui/components/SwitchWithLabel.tsx b/striker-ui/components/SwitchWithLabel.tsx
new file mode 100644
index 00000000..89ce5d9c
--- /dev/null
+++ b/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;
diff --git a/striker-ui/types/SwitchWithLabel.d.ts b/striker-ui/types/SwitchWithLabel.d.ts
new file mode 100644
index 00000000..4015119c
--- /dev/null
+++ b/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;
+  };