feat: add ui component Table & add initial workspace style

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,
+    },
+  };
+});