feat: refactor ui components

packages/app/src/ui/menu/index.ts

@@ -1,2 +1,3 @@
 export * from './menu';
-export { StyledMenuItem as MenuItem } from './styles';
+// export { StyledMenuItem as MenuItem } from './styles';
+export * from './menu-item';

packages/app/src/ui/menu/menu-item.tsx

@@ -0,0 +1,35 @@
+import {
+  cloneElement,
+  forwardRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+import { StyledMenuItem, StyledArrow } from './styles';
+
+export type IconMenuProps = PropsWithChildren<{
+  isDir?: boolean;
+  icon?: ReactElement;
+}> &
+  HTMLAttributes<HTMLButtonElement>;
+
+export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
+  ({ isDir = false, icon, children, ...props }, ref) => {
+    return (
+      <StyledMenuItem ref={ref} {...props}>
+        {icon &&
+          cloneElement(icon, {
+            width: 16,
+            height: 16,
+            style: {
+              marginRight: 14,
+            },
+          })}
+        {children}
+        {isDir ? <StyledArrow /> : null}
+      </StyledMenuItem>
+    );
+  }
+);
+MenuItem.displayName = 'MenuItem';
+export default MenuItem;

packages/app/src/ui/menu/styles.ts

@@ -1,5 +1,6 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 import StyledPopperContainer from '../shared/Container';
+import { MiddleArrowRightIcon } from '@blocksuite/icons';
 
 export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   return {
@@ -12,23 +13,39 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   };
 });
 
-export const StyledMenuItem = styled('div')<{ popperVisible?: boolean }>(
-  ({ theme, popperVisible }) => {
-    return {
-      borderRadius: '5px',
-      padding: '0 14px',
+export const StyledArrow = styled(MiddleArrowRightIcon)(({ theme }) => {
+  return {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+  };
+});
 
-      color: popperVisible
-        ? theme.colors.primaryColor
-        : theme.colors.popoverColor,
-      backgroundColor: popperVisible
-        ? theme.colors.hoverBackground
-        : 'transparent',
+export const StyledMenuItem = styled.button<{
+  popperVisible?: boolean;
+  isDir?: boolean;
+}>(({ theme, popperVisible, isDir = false }) => {
+  return {
+    width: '100%',
+    borderRadius: '5px',
+    padding: '0 14px',
+    fontSize: '14px',
+    height: '32px',
+    ...displayFlex('flex-start', 'center'),
+    cursor: isDir ? 'pointer' : '',
+    position: 'relative',
+    color: popperVisible
+      ? theme.colors.primaryColor
+      : theme.colors.popoverColor,
+    backgroundColor: popperVisible
+      ? theme.colors.hoverBackground
+      : 'transparent',
 
-      ':hover': {
-        color: theme.colors.primaryColor,
-        backgroundColor: theme.colors.hoverBackground,
-      },
-    };
-  }
-);
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});