feat: add Select field preview and form (#2655)

Closes #2432

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

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+
+import { TextInput } from '@/ui/input/components/TextInput';
+import { ThemeColor } from '@/ui/theme/constants/colors';
+
+export type SettingsObjectFieldSelectFormValues = {
+  color: ThemeColor;
+  text: string;
+}[];
+
+type SettingsObjectFieldSelectFormProps = {
+  onChange: (values: SettingsObjectFieldSelectFormValues) => void;
+  values?: SettingsObjectFieldSelectFormValues;
+};
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  display: block;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(3)};
+  text-transform: uppercase;
+`;
+
+const StyledInputsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const StyledOptionInput = styled(TextInput)`
+  & input {
+    height: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+
+export const SettingsObjectFieldSelectForm = ({
+  onChange,
+  values = [],
+}: SettingsObjectFieldSelectFormProps) => {
+  return (
+    <div>
+      <StyledLabel>Options</StyledLabel>
+      <StyledInputsContainer>
+        {values.map((value, index) => (
+          <StyledOptionInput
+            value={value.text}
+            onChange={(text) => {
+              const nextValues = [...values];
+              nextValues.splice(index, 1, { ...values[index], text });
+              onChange(nextValues);
+            }}
+          />
+        ))}
+      </StyledInputsContainer>
+    </div>
+  );
+};