Merge pull request #26 from alonkeyval/gen-1136-overview-header

[GEN-1136] chore: overview header

frontend/webapp/app/main/layout.tsx

@@ -0,0 +1,36 @@
+'use client';
+import { MainHeader } from '@/components';
+import React from 'react';
+import styled from 'styled-components';
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const MainContent = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 76px;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutContainer>
+      <MainContent>
+        <MainHeader />
+        {children}
+      </MainContent>
+    </LayoutContainer>
+  );
+}

frontend/webapp/app/main/page.tsx

@@ -0,0 +1,6 @@
+'use client';
+import React from 'react';
+
+export default function MainPage() {
+  return <></>;
+}

frontend/webapp/components/index.ts

@@ -5,3 +5,4 @@ export * from './common';
 export * from './notification/notification-manager';
 export * from './notification/notification-list';
 export * from './destinations';
+export * from './main';

frontend/webapp/components/main/header/cp-title/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+interface PlatformProps {
+  type: 'k8s' | 'vm';
+}
+
+const PlatformWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 10px;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  margin-right: 10px;
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const PlatformTitle: React.FC<PlatformProps> = ({ type }) => {
+  return (
+    <PlatformWrapper>
+      <IconWrapper>
+        <Image
+          src={`/icons/cp/${type}.svg`}
+          alt={type}
+          width={28}
+          height={28}
+        />
+      </IconWrapper>
+      <TextWrapper>
+        <Title>
+          {type === 'k8s' ? 'Kubernetes Cluster' : 'Virtual Machine'}
+        </Title>
+      </TextWrapper>
+    </PlatformWrapper>
+  );
+};
+
+export { PlatformTitle };

frontend/webapp/components/main/header/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { ConnectionStatus } from '@/reuseable-components';
+import { PlatformTitle } from './cp-title';
+
+interface MainHeaderProps {}
+
+const HeaderContainer = styled.div`
+  display: flex;
+  padding: 10px 0;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  border-bottom: 1px solid rgba(249, 249, 249, 0.16);
+  width: 100%;
+`;
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 32px;
+`;
+
+const PlatformTitleWrapper = styled.div`
+  margin-left: 32px;
+`;
+
+export const MainHeader: React.FC<MainHeaderProps> = () => {
+  return (
+    <HeaderContainer>
+      <Logo>
+        <Image
+          src="/brand/transparent-logo-white.svg"
+          alt="logo"
+          width={84}
+          height={20}
+        />
+      </Logo>
+      <PlatformTitleWrapper>
+        <PlatformTitle type="k8s" />
+      </PlatformTitleWrapper>
+      <ConnectionStatus
+        title="Connection Status"
+        status="lost"
+        subtitle="Please check your internet connection"
+      />
+    </HeaderContainer>
+  );
+};

frontend/webapp/components/main/index.tsx

@@ -0,0 +1 @@
+export * from './header';

frontend/webapp/containers/main/destinations/add-destination/index.tsx

@@ -67,7 +67,7 @@ export function ChooseDestinationContainer() {
             },
             {
               label: 'DONE',
-              onClick: () => console.log('Next button clicked'),
+              onClick: () => router.push('/main'),
               variant: 'primary',
             },
           ]}

frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx

@@ -27,7 +27,7 @@ const SearchAndDropdown: React.FC<SearchDropdownProps> = ({
       />
       <Dropdown
         options={dropdownOptions}
-        selectedOption={selectedOption}
+        value={selectedOption}
         onSelect={setSelectedOption}
       />
     </Container>

frontend/webapp/reuseable-components/connection-status/index.tsx

@@ -0,0 +1,89 @@
+import Image from 'next/image';
+import React from 'react';
+import { Text } from '../text';
+import styled from 'styled-components';
+
+interface ConnectionStatusProps {
+  title: string;
+  subtitle?: string;
+  status: 'alive' | 'lost';
+}
+
+const StatusWrapper = styled.div<{ status: 'alive' | 'lost' }>`
+  display: flex;
+  align-items: center;
+  padding: 8px 24px;
+  border-radius: 32px;
+  background: ${({ status }) =>
+    status === 'alive'
+      ? `linear-gradient(
+    90deg,
+    rgba(23, 32, 19, 0) 0%,
+    rgba(23, 32, 19, 0.8) 50%,
+    #172013 100%
+  )`
+      : `linear-gradient(90deg, rgba(51, 21, 21, 0.00) 0%, rgba(51, 21, 21, 0.80) 50%, #331515 100%)`};
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Title = styled(Text)<{ status: 'alive' | 'lost' }>`
+  font-weight: 400;
+  font-size: 14px;
+  color: ${({ status, theme }) =>
+    status === 'alive' ? theme.text.success : theme.text.error};
+`;
+
+const Subtitle = styled(Text)`
+  font-size: 12px;
+  font-weight: 400;
+  color: #db5151;
+`;
+
+const TextDivider = styled.div`
+  width: 1px;
+  height: 12px;
+  background: rgba(237, 124, 124, 0.16);
+  margin: 0 8px;
+`;
+
+const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
+  title,
+  subtitle,
+  status,
+}) => {
+  return (
+    <StatusWrapper status={status}>
+      <IconWrapper>
+        <Image
+          src={`/icons/notification/${
+            status === 'alive' ? 'success-icon' : 'error-icon2'
+          }.svg`}
+          alt="status"
+          width={16}
+          height={16}
+        />
+      </IconWrapper>
+      <TextWrapper>
+        <Title status={status}>{title}</Title>
+        {subtitle && (
+          <TextWrapper>
+            <TextDivider />
+            <Subtitle>{subtitle}</Subtitle>
+          </TextWrapper>
+        )}
+      </TextWrapper>
+    </StatusWrapper>
+  );
+};
+
+export { ConnectionStatus };

frontend/webapp/reuseable-components/index.ts

@@ -19,3 +19,4 @@ export * from './input-list';
 export * from './key-value-input-list';
 export * from './no-data-found';
 export * from './skeleton-loader';
+export * from './connection-status';

frontend/webapp/styles/theme.ts

@@ -18,6 +18,8 @@ const text = {
   light_grey: '#CCD0D2',
   grey: '#8b92a5',
   dark_button: '#0A1824',
+  success: '#81AF65',
+  error: '#EF7676',
 };
 
 const font_family = {