add image_builder icon

Author: talhainvenxion

src/ui/components/icons/assets/ImageBuilder.svg

@@ -58,6 +58,7 @@ import { ReactComponent as Graph } from './assets/Graph.svg';
 import { ReactComponent as GitCommit } from './assets/GitCommit.svg';
 import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
 import { ReactComponent as Run } from './assets/Run.svg';
+import { ReactComponent as ImageBuilder } from './assets/ImageBuilder.svg';
 // import { ReactComponent as Inprogress } from './assets/InProgress.svg';
 // import { ReactComponent as Cached } from './assets/Cached.svg';
 // import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -187,6 +188,10 @@ const icons = {
     Component: ChartBarHorizontal,
     useStroke: true,
   }),
+  image_builder: createIcon({
+    Component: ImageBuilder,
+    useStroke: true,
+  }),
 
   // paginations
   paginationFirst: createIcon({ Component: PaginationFirst, useStroke: true }),

src/ui/components/icons/index.tsx

@@ -401,6 +401,34 @@ const Component = () => {
                 </Box>
               </FlexBox>
             )}
+            {item === 'image_builder' && (
+              <FlexBox
+                onClick={() => selectSection(item)}
+                style={{
+                  ...sectionStyle,
+                  background: formatSectionColor(item),
+                }}
+                marginTop="sm"
+              >
+                <Box>
+                  <icons.image_builder
+                    color={
+                      selectedComp === item
+                        ? iconColors.white
+                        : iconColors.primary
+                    }
+                    size={iconSizes.md}
+                  />
+                </Box>
+                <Box>
+                  <Paragraph
+                    style={{ color: formatTextColor(item), ...textStyle }}
+                  >
+                    {formatText(item)}
+                  </Paragraph>
+                </Box>
+              </FlexBox>
+            )}
             {console.log(item, 'item')}
             {item !== 'data_validator' &&
               item !== 'step_operator' &&
@@ -413,6 +441,7 @@ const Component = () => {
               item !== 'container_registry' &&
               item !== 'annotator' &&
               item !== 'alerter' &&
+              item !== 'image_builder' &&
               item !== 'artifact_store' && (
                 <FlexBox
                   onClick={() => selectSection(item)}