feat: add New Field Step 2 form (#2138)

Closes #2001

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/settings/data-model/components/SettingsObjectFieldFormSection.tsx

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { TextArea } from '@/ui/input/components/TextArea';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Section } from '@/ui/layout/section/components/Section';
+
+type SettingsObjectFieldFormSectionProps = {
+  disabled?: boolean;
+  name?: string;
+  description?: string;
+  iconKey?: string;
+  onChange?: (
+    formValues: Partial<{
+      iconKey: string;
+      name: string;
+      description: string;
+    }>,
+  ) => void;
+};
+
+const StyledInputsContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+export const SettingsObjectFieldFormSection = ({
+  disabled,
+  name = '',
+  description = '',
+  iconKey = 'IconUsers',
+  onChange,
+}: SettingsObjectFieldFormSectionProps) => (
+  <Section>
+    <H2Title
+      title="Name and description"
+      description="The name and description of this field"
+    />
+    <StyledInputsContainer>
+      <IconPicker
+        selectedIconKey={iconKey}
+        onChange={(value) => onChange?.({ iconKey: value.iconKey })}
+        variant="primary"
+      />
+      <TextInput
+        placeholder="Employees"
+        value={name}
+        onChange={(value) => onChange?.({ name: value })}
+        disabled={disabled}
+        fullWidth
+      />
+    </StyledInputsContainer>
+    <TextArea
+      placeholder="Write a description"
+      minRows={4}
+      value={description}
+      onChange={(value) => onChange?.({ description: value })}
+      disabled={disabled}
+    />
+  </Section>
+);