Merge pull request #3 from alonkeyval/gen-1099-setup-side-menu

[GEN-1099] chore: setup side menu

frontend/webapp/app/setup/layout.tsx

@@ -1,16 +1,54 @@
 'use client';
 import React from 'react';
-import { SetupHeader } from '@/components';
+import styled from 'styled-components';
+import { SetupHeader, SideMenu } from '@/components';
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const SideMenuWrapper = styled.div`
+  position: absolute;
+  left: 24px;
+  top: 144px;
+`;
+
+const HeaderWrapper = styled.div`
+  width: 100vw;
+`;
+
+const MainContent = styled.div`
+  display: flex;
+  max-width: 1440px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.secondary};
+  flex-direction: column;
+  align-items: center;
+`;
 
 export default function SetupLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <>
-      <SetupHeader />
-      {children}
-    </>
+    <LayoutContainer>
+      <HeaderWrapper>
+        <SetupHeader />
+      </HeaderWrapper>
+      <SideMenuWrapper>
+        <SideMenu />
+      </SideMenuWrapper>
+      <MainContent>
+        <SideMenu />
+
+        {children}
+      </MainContent>
+    </LayoutContainer>
   );
 }

frontend/webapp/components/setup/index.tsx

@@ -6,3 +6,4 @@ export { ConnectionsIcons } from './connection/connections_icons/connections_ico
 export { CreateConnectionForm } from './connection/create.connection.form/create.connection.form';
 export { QuickHelp } from './connection/quick.help/quick.help';
 export * from './headers';
+export * from './menu';

frontend/webapp/components/setup/menu/index.tsx

@@ -0,0 +1,124 @@
+import { Text } from '@/reuseable-components';
+import Image from 'next/image';
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface StepProps {
+  title: string;
+  subtitle?: string;
+  state: 'finish' | 'active' | 'disabled';
+  stepNumber: number;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+  display: flex;
+  gap: 16px;
+  padding: 10px 0;
+  cursor: ${({ state }) => (state === 'disabled' ? 'not-allowed' : 'pointer')};
+  opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
+
+  transition: opacity 0.3s;
+
+  ${({ state }) => state === 'active' && css``}
+
+  & + & {
+    margin-top: 10px;
+  }
+`;
+
+const IconWrapper = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+  margin-right: 10px;
+  border-radius: 32px;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #f9f9f9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ state }) =>
+    state === 'finish'
+      ? css`
+          opacity: 0.8;
+        `
+      : state === 'disabled' &&
+        css`
+          border: 1px dashed rgba(249, 249, 249, 0.4);
+        `}
+`;
+
+const StepContent = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const StepTitle = styled(Text)`
+  font-size: 16px;
+  font-weight: bold;
+`;
+
+const StepSubtitle = styled(Text)``;
+
+const SideMenu: React.FC = () => {
+  const steps: StepProps[] = [
+    {
+      title: 'INSTALLATION',
+      subtitle: 'Success',
+      state: 'finish',
+      stepNumber: 1,
+    },
+    {
+      title: 'SOURCES',
+      state: 'active',
+      stepNumber: 2,
+    },
+    {
+      title: 'DESTINATIONS',
+      state: 'disabled',
+      stepNumber: 3,
+    },
+  ];
+
+  return (
+    <Container>
+      {steps.map((step, index) => (
+        <Step key={index} state={step.state}>
+          <IconWrapper state={step.state}>
+            {step.state === 'finish' && (
+              <Image
+                src="/icons/common/check.svg"
+                width={20}
+                height={20}
+                alt={''}
+              />
+            )}
+            {step.state === 'active' && (
+              <Text size={12}>{step.stepNumber}</Text>
+            )}
+            {step.state === 'disabled' && (
+              <Text size={12}>{step.stepNumber}</Text>
+            )}
+          </IconWrapper>
+          <StepContent>
+            <StepTitle>{step.title}</StepTitle>
+            {step.subtitle && (
+              <StepSubtitle size={10} weight={300} family={'secondary'}>
+                {step.subtitle}
+              </StepSubtitle>
+            )}
+          </StepContent>
+        </Step>
+      ))}
+    </Container>
+  );
+};
+
+export { SideMenu };

frontend/webapp/reuseable-components/text/index.tsx

@@ -7,20 +7,30 @@ interface TextProps {
   size?: number;
   weight?: number;
   align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
 }
 
 const TextWrapper = styled.span<{
   color?: string;
   size: number;
   weight: number;
   align: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
 }>`
   color: ${({ color, theme }) =>
     color || console.log({ theme }) || theme.colors.text};
   font-size: ${({ size }) => size}px;
   font-weight: ${({ weight }) => weight};
   text-align: ${({ align }) => align};
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme, family }) => {
+    if (family === 'primary') {
+      return theme.font_family.primary;
+    }
+    if (family === 'secondary') {
+      return theme.font_family.secondary;
+    }
+    return theme.font_family.primary;
+  }};
 `;
 
 const Text: React.FC<TextProps> = ({
@@ -29,9 +39,16 @@ const Text: React.FC<TextProps> = ({
   size = 16,
   weight = 400,
   align = 'left',
+  family = 'primary',
 }) => {
   return (
-    <TextWrapper color={color} size={size} weight={weight} align={align}>
+    <TextWrapper
+      family={family}
+      color={color}
+      size={size}
+      weight={weight}
+      align={align}
+    >
       {children}
     </TextWrapper>
   );

frontend/webapp/styles/theme.ts

@@ -19,6 +19,7 @@ const text = {
 
 const font_family = {
   primary: 'Kode Mono, sans-serif',
+  secondary: 'Inter, sans-serif',
 };
 
 // Define the theme interface