feat(web): extract and replace Switch Form components

web/src/components/FormItem/DescWrapper.tsx

@@ -0,0 +1,12 @@
+import clsx from "clsx";
+import type { FC, ReactNode } from "react";
+
+const DescWrapper: FC<{desc: string | ReactNode, className?: string}> = ({desc, className}) => {
+  return (
+    <div className={clsx(className, "rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ")}>
+      {desc}
+    </div>
+  )
+}
+
+export default DescWrapper

web/src/components/FormItem/LabelWrapper.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+import type { FC, ReactNode } from "react";
+
+const LabelWrapper: FC<{ title: string | ReactNode, className?: string; children?: ReactNode}> = ({title, className, children}) => {
+  return (
+    <div className={clsx(className)}>
+      <div className="rb:text-[14px] rb:font-medium rb:leading-5">{title}</div>
+      {children}
+    </div>
+  )
+}
+
+export default LabelWrapper

web/src/components/FormItem/SwitchFormItem.tsx

@@ -0,0 +1,45 @@
+import { Switch, Form, ConfigProvider } from "antd";
+import useSize from 'antd/lib/config-provider/hooks/useSize'
+import type { FC, ReactNode } from "react";
+import { useContext } from "react";
+
+import LabelWrapper from './LabelWrapper'
+import DescWrapper from './DescWrapper'
+
+interface SwitchFormItemProps {
+  title: string | ReactNode;
+  desc?: string | ReactNode;
+  name: string | string[];
+  size?: 'small' | 'default'
+  className?: string;
+  disabled?: boolean;
+}
+
+const SwitchFormItem: FC<SwitchFormItemProps> = ({
+  title,
+  desc,
+  name,
+  size = 'default',
+  className,
+  disabled
+}) => {
+  const componentSize = useSize()
+  console.log('componentSize', componentSize)
+  
+  return (
+    <div className={`${className} rb:flex rb:items-center rb:justify-between`}>
+      <LabelWrapper title={title}>
+        {desc && <DescWrapper desc={desc} className="rb:mt-2" />}
+      </LabelWrapper>
+      <Form.Item
+        name={name}
+        valuePropName="checked"
+        className="rb:mb-0!"
+      >
+        <Switch disabled={disabled} size={size} />
+      </Form.Item>
+    </div>
+  )
+}
+
+export default SwitchFormItem