Refactor settings > data model section (#2031)

front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconBox, IconDatabase, IconFileCheck } from '@/ui/display/icon';
+
+import { SettingsObjectTypeCard } from './SettingsObjectTypeCard';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+export const SettingsNewObjectType = () => {
+  const theme = useTheme();
+  const [selectedType, setSelectedType] = useState<string | null>(null);
+  const handleCardClick = (selectedType: string) => {
+    setSelectedType(selectedType);
+  };
+  return (
+    <StyledContainer>
+      <SettingsObjectTypeCard
+        title="Standard"
+        color="blue"
+        selected={selectedType === 'Standard'}
+        prefixIcon={
+          <IconFileCheck
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+        onClick={() => handleCardClick('Standard')}
+      ></SettingsObjectTypeCard>
+      <SettingsObjectTypeCard
+        title="Custom"
+        color="orange"
+        selected={selectedType === 'Custom'}
+        prefixIcon={
+          <IconBox
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+        onClick={() => handleCardClick('Custom')}
+      ></SettingsObjectTypeCard>
+      <SettingsObjectTypeCard
+        title="Remote"
+        soon
+        disabled
+        color="green"
+        selected={selectedType === 'Remote'}
+        prefixIcon={
+          <IconDatabase
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+      ></SettingsObjectTypeCard>
+    </StyledContainer>
+  );
+};

front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx

@@ -0,0 +1,79 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconCheck } from '@/ui/display/icon';
+import { SoonPill } from '@/ui/display/pill/components/SoonPill';
+import { Tag } from '@/ui/display/tag/components/Tag';
+import { ThemeColor } from '@/ui/theme/constants/colors';
+
+const StyledObjectTypeCard = styled.div<SettingsObjectTypeCardProps>`
+  ${({ theme, disabled, selected }) => `
+    background: ${theme.background.transparent.primary};
+    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+    display: flex;
+    flex-direction: row;
+    font-family: ${theme.font.family};
+    font-weight: 500;
+    border-style: solid;
+    border-width: '1px';
+    padding: ${theme.spacing(3)};
+    border-radius: ${theme.border.radius.sm};
+    gap: ${theme.spacing(2)};
+    border-color: ${
+      selected ? theme.border.color.inverted : theme.border.color.medium
+    };
+    color: ${theme.font.color.primary};
+    align-items: center;
+    width: 140px;
+  `}
+`;
+
+const StyledTag = styled(Tag)`
+  box-sizing: border-box;
+  height: ${({ theme }) => theme.spacing(5)};
+`;
+
+const StyledIconCheck = styled(IconCheck)`
+  margin-left: auto;
+`;
+
+type SettingsObjectTypeCardProps = {
+  prefixIcon?: React.ReactNode;
+  title: string;
+  soon?: boolean;
+  disabled?: boolean;
+  color: ThemeColor;
+  selected: boolean;
+  onClick?: () => void;
+};
+
+export const SettingsObjectTypeCard = ({
+  prefixIcon,
+  title,
+  soon = false,
+  selected,
+  disabled = false,
+  color,
+  onClick,
+}: SettingsObjectTypeCardProps) => {
+  const theme = useTheme();
+  return (
+    <div onClick={() => onclick}>
+      <StyledObjectTypeCard
+        title={title}
+        soon={soon}
+        disabled={disabled}
+        color={color}
+        selected={selected}
+        onClick={onClick}
+      >
+        {prefixIcon}
+        <StyledTag color={color} text={title} />
+        {soon && <SoonPill />}
+        {!disabled && selected && <StyledIconCheck size={theme.icon.size.md} />}
+      </StyledObjectTypeCard>
+    </div>
+  );
+};
+
+export {};