feat: New Object - Add Object type section #1918 (#1985)

* feat: New Object - Add Object type section #1918

* fix: dark mode border color

* feat: New Object - Add Object type section #1918

* fix: dark mode border color

* Requested changes in the PR

* fix(new object): requested changes in the PR

* fix(1985): border color

front/src/modules/settings/objects/components/NewObjectType.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconBox, IconDatabase, IconFileCheck } from '@/ui/display/icon';
+
+import { ObjectTypeCard } from './ObjectTypeCard';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(5)};
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
+  width: 100%;
+`;
+
+export const NewObjectType = () => {
+  const theme = useTheme();
+  const [selectedType, setSelectedType] = useState<string | null>(null);
+  const handleCardClick = (selectedType: string) => {
+    setSelectedType(selectedType);
+  };
+  return (
+    <StyledContainer>
+      <ObjectTypeCard
+        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')}
+      ></ObjectTypeCard>
+      <ObjectTypeCard
+        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')}
+      ></ObjectTypeCard>
+      <ObjectTypeCard
+        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}
+          />
+        }
+      ></ObjectTypeCard>
+    </StyledContainer>
+  );
+};

front/src/modules/settings/objects/components/ObjectTypeCard.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<ObjectTypeCardProps>`
+  ${({ 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 ObjectTypeCardProps = {
+  prefixIcon?: React.ReactNode;
+  title: string;
+  soon?: boolean;
+  disabled?: boolean;
+  color: ThemeColor;
+  selected: boolean;
+  onClick?: () => void;
+};
+
+export const ObjectTypeCard = ({
+  prefixIcon,
+  title,
+  soon = false,
+  selected,
+  disabled = false,
+  color,
+  onClick,
+}: ObjectTypeCardProps) => {
+  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 {};

front/src/modules/ui/display/icon/index.ts

@@ -11,6 +11,7 @@ export {
   IconArrowUp,
   IconArrowUpRight,
   IconBell,
+  IconBox,
   IconBrandGithub,
   IconBrandGoogle,
   IconBrandLinkedin,
@@ -34,9 +35,11 @@ export {
   IconCopy,
   IconCross,
   IconCurrencyDollar,
+  IconDatabase,
   IconDotsVertical,
   IconEye,
   IconEyeOff,
+  IconFileCheck,
   IconFileImport,
   IconFileUpload,
   IconForbid,

front/src/pages/settings/SettingsNewObject.tsx

@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
 
-import { SettingsIconSection } from '@/settings/components/SettingsIconSection';
+import { NewObjectType } from '@/settings/objects/components/NewObjectType';
 import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
-import { IconSettings } from '@/ui/input/constants/icons';
-import { useIconPicker } from '@/ui/input/hooks/useIconPicker';
+import { IconSettings } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 const StyledContainer = styled.div`
@@ -18,8 +19,6 @@ const StyledContainer = styled.div`
 `;
 
 export const SettingsNewObject = () => {
-  const { Icon, iconKey, setIconPicker } = useIconPicker();
-
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <StyledContainer>
@@ -29,12 +28,13 @@ export const SettingsNewObject = () => {
             { children: 'New' },
           ]}
         />
-
-        <SettingsIconSection
-          Icon={Icon}
-          iconKey={iconKey}
-          setIconPicker={setIconPicker}
-        />
+        <Section>
+          <H2Title
+            title="Object Type"
+            description="The type of object you want to add"
+          />
+        </Section>
+        <NewObjectType></NewObjectType>
       </StyledContainer>
     </SubMenuTopBarContainer>
   );