feat(core): support create cloud workspace (#5771)

close TOV-475

has not logged：

https://github.com/toeverything/AFFiNE/assets/102217452/b9aa2806-7dbd-4235-895d-5b27effb5831

 has logged :

https://github.com/toeverything/AFFiNE/assets/102217452/259a1c35-c6ab-4a52-9e03-4438ca64e620

client has not logged:

https://github.com/toeverything/AFFiNE/assets/102217452/af6ef528-6fb8-4a27-842f-00c9669afcb2

packages/frontend/component/src/ui/switch/index.css.ts

@@ -43,3 +43,7 @@ export const switchCheckedStyle = style({
     },
   },
 });
+export const switchDisabledStyle = style({
+  cursor: 'not-allowed',
+  opacity: 0.5,
+});

packages/frontend/component/src/ui/switch/switch.tsx

@@ -13,6 +13,7 @@ export type SwitchProps = Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> & {
   checked?: boolean;
   onChange?: (checked: boolean) => void;
   children?: ReactNode;
+  disabled?: boolean;
 };
 
 export const Switch = ({
@@ -20,6 +21,7 @@ export const Switch = ({
   onChange: onChangeProp,
   children,
   className,
+  disabled,
   ...otherProps
 }: SwitchProps) => {
   const [checkedState, setCheckedState] = useState(checkedProp);
@@ -27,11 +29,14 @@ export const Switch = ({
   const checked = onChangeProp ? checkedProp : checkedState;
   const onChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (disabled) {
+        return;
+      }
       const newChecked = event.target.checked;
       if (onChangeProp) onChangeProp(newChecked);
       else setCheckedState(newChecked);
     },
-    [onChangeProp]
+    [disabled, onChangeProp]
   );
 
   return (
@@ -47,6 +52,7 @@ export const Switch = ({
       <span
         className={clsx(styles.switchStyle, {
           [styles.switchCheckedStyle]: checked,
+          [styles.switchDisabledStyle]: disabled,
         })}
       />
     </label>