feat(core): add cloud workspace member limit (#5500)

<img width="521" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/2cac78ef-07ed-4e06-b739-1279f913d0e1">
<img width="514" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/eed0db08-8550-4686-8ea1-251f1c4c7fee">

packages/frontend/component/src/components/member-components/index.tsx

@@ -1,3 +1,4 @@
 export * from './accept-invite-page';
 export * from './invite-modal';
+export * from './member-limit-modal';
 export * from './pagination';

packages/frontend/component/src/components/member-components/member-limit-modal.tsx

@@ -0,0 +1,53 @@
+import { ConfirmModal } from '@affine/component/ui/modal';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useCallback } from 'react';
+
+export interface MemberLimitModalProps {
+  isFreePlan: boolean;
+  open: boolean;
+  plan: string;
+  quota: string;
+  setOpen: (value: boolean) => void;
+  onConfirm: () => void;
+}
+
+export const MemberLimitModal = ({
+  isFreePlan,
+  open,
+  plan,
+  quota,
+  setOpen,
+  onConfirm,
+}: MemberLimitModalProps) => {
+  const t = useAFFiNEI18N();
+  const handleConfirm = useCallback(() => {
+    setOpen(false);
+    if (isFreePlan) {
+      onConfirm();
+    }
+  }, [onConfirm, setOpen, isFreePlan]);
+
+  return (
+    <ConfirmModal
+      open={open}
+      onOpenChange={setOpen}
+      title={t['com.affine.payment.member-limit.title']()}
+      description={t[
+        isFreePlan
+          ? 'com.affine.payment.member-limit.free.description'
+          : 'com.affine.payment.member-limit.pro.description'
+      ]({ planName: plan, quota: quota })}
+      cancelButtonOptions={{ style: { display: isFreePlan ? '' : 'none' } }}
+      confirmButtonOptions={{
+        type: 'primary',
+        children:
+          t[
+            isFreePlan
+              ? 'com.affine.payment.member-limit.free.confirm'
+              : 'com.affine.payment.member-limit.pro.confirm'
+          ](),
+      }}
+      onConfirm={handleConfirm}
+    ></ConfirmModal>
+  );
+};