Refactor settings > data model section (#2031)

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

@@ -0,0 +1,55 @@
+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 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 = {
+  Icon: IconComponent;
+  iconKey: string;
+  setIconPicker?: (icon: { Icon: IconComponent; iconKey: string }) => void;
+};
+
+export const SettingsObjectIconSection = ({
+  Icon,
+  iconKey,
+  setIconPicker,
+}: SettingsObjectIconSectionProps) => {
+  return (
+    <section>
+      <H2Title
+        title="Icon"
+        description="The icon that will be displayed in the sidebar."
+      />
+      <StyledContainer>
+        <IconPicker
+          selectedIconKey={iconKey}
+          onChange={(icon) => {
+            setIconPicker?.({ Icon: icon.Icon, iconKey: icon.iconKey });
+          }}
+        />
+        <StyledArrowContainer>
+          <img src={ArrowRight} alt="Arrow right" width={32} height={16} />
+        </StyledArrowContainer>
+        <SettingsObjectIconWithLabel Icon={Icon} label="Workspaces" />
+      </StyledContainer>
+    </section>
+  );
+};

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

@@ -0,0 +1,45 @@
+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 size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        <StyledItemLabel>{label}</StyledItemLabel>
+      </StyledSubContainer>
+    </StyledContainer>
+  );
+};