feat: add ui component Table & add initial workspace style

packages/app/src/ui/modal/index.tsx

@@ -1,4 +1,6 @@
 import Modal from './modal';
 
+export * from './modal-close-button';
 export * from './modal';
+
 export default Modal;

packages/app/src/ui/modal/modal-close-button.tsx

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { StyledCloseButton } from './style';
+import { CloseIcon } from '@blocksuite/icons';
+
+export type ModalCloseButtonProps = {
+  top?: number;
+  right?: number;
+  triggerSize?: [number, number];
+  size?: [number, number];
+  iconSize?: [number, number];
+} & HTMLAttributes<HTMLButtonElement>;
+
+export const ModalCloseButton = ({
+  iconSize = [24, 24],
+  ...props
+}: ModalCloseButtonProps) => {
+  const [iconWidth, iconHeight] = iconSize;
+  return (
+    <StyledCloseButton {...props}>
+      <CloseIcon width={iconWidth} height={iconHeight} />
+    </StyledCloseButton>
+  );
+};
+
+export default ModalCloseButton;

packages/app/src/ui/modal/style.ts

@@ -1,5 +1,6 @@
-import { displayFlex, fixedCenter, styled } from '@/styles';
+import { absoluteCenter, displayFlex, fixedCenter, styled } from '@/styles';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
+import { ModalCloseButtonProps } from '@/ui/modal/modal-close-button';
 
 export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
   return {
@@ -28,3 +29,40 @@ export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
     },
   };
 });
+
+export const StyledCloseButton = styled.button<
+  Pick<ModalCloseButtonProps, 'size' | 'triggerSize' | 'top' | 'right'>
+>(({ theme, triggerSize = [], size = [32, 32], top, right }) => {
+  const [triggerWidth, triggerHeight] = triggerSize;
+  const [width, height] = size;
+
+  return {
+    width: triggerWidth ?? width * 2,
+    height: triggerHeight ?? height * 2,
+    color: theme.colors.iconColor,
+    cursor: 'pointer',
+    ...displayFlex('center', 'center'),
+    position: 'absolute',
+    top: top ?? 0,
+    right: right ?? 0,
+
+    // TODO: we need to add @emotion/babel-plugin
+    '::after': {
+      content: '""',
+      width,
+      height,
+      borderRadius: '6px',
+      ...absoluteCenter({ horizontal: true, vertical: true }),
+    },
+    ':hover': {
+      color: theme.colors.primaryColor,
+      '::after': {
+        background: theme.colors.hoverBackground,
+      },
+    },
+    svg: {
+      position: 'relative',
+      zIndex: 1,
+    },
+  };
+});