Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx

@@ -0,0 +1,67 @@
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
+import { Section } from '@/ui/layout/section/components/Section';
+
+import ArrowRight from '../assets/ArrowRight.svg';
+
+import { SettingsObjectIconWithLabel } from './SettingsObjectIconWithLabel';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledArrowContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+`;
+
+type SettingsObjectIconSectionProps = {
+  disabled?: boolean;
+  iconKey?: string;
+  label?: string;
+  onChange?: (icon: { Icon: IconComponent; iconKey: string }) => void;
+};
+
+export const SettingsObjectIconSection = ({
+  disabled,
+  iconKey = 'IconPigMoney',
+  label,
+  onChange,
+}: SettingsObjectIconSectionProps) => {
+  const { Icon } = useLazyLoadIcon(iconKey);
+
+  return (
+    <Section>
+      <H2Title
+        title="Icon"
+        description="The icon that will be displayed in the sidebar."
+      />
+      <StyledContainer>
+        <IconPicker
+          disabled={disabled}
+          selectedIconKey={iconKey}
+          onChange={(icon) => {
+            onChange?.({ Icon: icon.Icon, iconKey: icon.iconKey });
+          }}
+        />
+        <StyledArrowContainer>
+          <img src={ArrowRight} alt="Arrow right" width={32} height={16} />
+        </StyledArrowContainer>
+        {Icon && (
+          <SettingsObjectIconWithLabel
+            Icon={Icon}
+            label={label || 'Investors'}
+          />
+        )}
+      </StyledContainer>
+    </Section>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/object-edit/SettingsObjectIconWithLabel.tsx

@@ -0,0 +1,47 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledSubContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+const StyledItemLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.size.md};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+`;
+
+type SettingsObjectIconWithLabelProps = {
+  Icon?: IconComponent;
+  label: string;
+};
+
+export const SettingsObjectIconWithLabel = ({
+  Icon,
+  label,
+}: SettingsObjectIconWithLabelProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledContainer>
+      <StyledSubContainer>
+        {!!Icon && (
+          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        )}
+        <StyledItemLabel>{label}</StyledItemLabel>
+      </StyledSubContainer>
+    </StyledContainer>
+  );
+};