Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx

@@ -0,0 +1,66 @@
+import { ComponentProps, MouseEvent } from 'react';
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+
+const StyledHeader = styled.li`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+
+  padding: ${({ theme }) => theme.spacing(1)};
+
+  user-select: none;
+`;
+
+const StyledChildrenWrapper = styled.span`
+  padding: 0 ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledLightIconButton = styled(LightIconButton)`
+  display: inline-flex;
+  margin-left: auto;
+  margin-right: 0;
+`;
+
+type DropdownMenuHeaderProps = ComponentProps<'li'> & {
+  StartIcon?: IconComponent;
+  EndIcon?: IconComponent;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  testId?: string;
+};
+
+export const DropdownMenuHeader = ({
+  children,
+  StartIcon,
+  EndIcon,
+  onClick,
+  testId,
+}: DropdownMenuHeaderProps) => {
+  return (
+    <StyledHeader data-testid={testId}>
+      {StartIcon && (
+        <LightIconButton
+          testId="dropdown-menu-header-end-icon"
+          Icon={StartIcon}
+          onClick={onClick}
+          accent="tertiary"
+          size="small"
+        />
+      )}
+      <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
+      {EndIcon && (
+        <StyledLightIconButton
+          testId="dropdown-menu-header-end-icon"
+          Icon={EndIcon}
+          onClick={onClick}
+          accent="tertiary"
+          size="small"
+        />
+      )}
+    </StyledHeader>
+  );
+};