From 30b5ae143d57ef4bff9e449d7c4b23e762374a26 Mon Sep 17 00:00:00 2001
From: Shoaibdev7 <shoaibdev7@gmail.com>
Date: Fri, 22 Nov 2024 00:06:42 +0500
Subject: [PATCH] fix(logo): render Icon and Title

---
 public/svg-icons/Logo.svg                     | 12 ++++
 src/components/Icons/Logo.tsx                 | 55 ++++++++++++++
 .../mindset/components/header/index.tsx       | 72 +++++++++++++++++--
 3 files changed, 132 insertions(+), 7 deletions(-)
 create mode 100644 public/svg-icons/Logo.svg
 create mode 100644 src/components/Icons/Logo.tsx

diff --git a/public/svg-icons/Logo.svg b/public/svg-icons/Logo.svg
new file mode 100644
index 000000000..342459b7f
--- /dev/null
+++ b/public/svg-icons/Logo.svg
@@ -0,0 +1,12 @@
+<svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.2998 2.55199C7.2998 1.51094 8.11675 0.666992 9.1245 0.666992H12.1299C13.1376 0.666992 13.9546 1.51094 13.9546 2.55199C13.9546 3.59305 13.1376 4.43699 12.1299 4.43699H9.1245C8.11675 4.43699 7.2998 3.59305 7.2998 2.55199Z" fill="white"/>
+<path d="M7.2998 25.449C7.2998 26.49 8.11675 27.334 9.1245 27.334H12.1299C13.1376 27.334 13.9546 26.49 13.9546 25.449C13.9546 24.4079 13.1376 23.564 12.1299 23.564H9.1245C8.11675 23.564 7.2998 24.4079 7.2998 25.449Z" fill="white"/>
+<path d="M2.79102 8.29613C2.79102 7.25508 3.60796 6.41113 4.61571 6.41113H12.1292C13.1369 6.41113 13.9539 7.25508 13.9539 8.29613C13.9539 9.33719 13.1369 10.1811 12.1292 10.1811H4.61571C3.60796 10.1811 2.79102 9.33719 2.79102 8.29613Z" fill="white"/>
+<path d="M2.79102 19.7039C2.79102 20.7449 3.60796 21.5889 4.61571 21.5889H12.1292C13.1369 21.5889 13.9539 20.7449 13.9539 19.7039C13.9539 18.6628 13.1369 17.8189 12.1292 17.8189H4.61571C3.60796 17.8189 2.79102 18.6628 2.79102 19.7039Z" fill="white"/>
+<path d="M0 14.094C0 13.0529 0.816945 12.209 1.8247 12.209H12.1289C13.1366 12.209 13.9536 13.0529 13.9536 14.094C13.9536 15.135 13.1366 15.979 12.1289 15.979H1.8247C0.816946 15.979 0 15.135 0 14.094Z" fill="white"/>
+<path d="M22.7002 25.448C22.7002 26.4891 21.8833 27.333 20.8755 27.333H17.8701C16.8624 27.333 16.0454 26.4891 16.0454 25.448C16.0454 24.407 16.8624 23.563 17.8701 23.563H20.8755C21.8832 23.563 22.7002 24.407 22.7002 25.448Z" fill="white"/>
+<path d="M22.7002 2.55199C22.7002 1.51094 21.8833 0.666992 20.8755 0.666992H17.8701C16.8624 0.666992 16.0454 1.51094 16.0454 2.55199C16.0454 3.59305 16.8624 4.43699 17.8701 4.43699H20.8755C21.8832 4.43699 22.7002 3.59305 22.7002 2.55199Z" fill="white"/>
+<path d="M27.209 19.7029C27.209 20.7439 26.392 21.5879 25.3843 21.5879H17.8708C16.8631 21.5879 16.0461 20.7439 16.0461 19.7029C16.0461 18.6618 16.8631 17.8179 17.8708 17.8179H25.3843C26.392 17.8179 27.209 18.6618 27.209 19.7029Z" fill="white"/>
+<path d="M27.209 8.29613C27.209 7.25508 26.392 6.41113 25.3843 6.41113H17.8708C16.8631 6.41113 16.0461 7.25508 16.0461 8.29613C16.0461 9.33719 16.8631 10.1811 17.8708 10.1811H25.3843C26.392 10.1811 27.209 9.33719 27.209 8.29613Z" fill="white"/>
+<path d="M30 14.093C30 13.052 29.1831 12.208 28.1753 12.208H17.8711C16.8634 12.208 16.0464 13.052 16.0464 14.093C16.0464 15.1341 16.8634 15.978 17.8711 15.978H28.1753C29.1831 15.978 30 15.1341 30 14.093Z" fill="white"/>
+</svg>
diff --git a/src/components/Icons/Logo.tsx b/src/components/Icons/Logo.tsx
new file mode 100644
index 000000000..2cbae33ad
--- /dev/null
+++ b/src/components/Icons/Logo.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable */
+import React from 'react';
+
+const Logo: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 30 28"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.2998 2.55199C7.2998 1.51094 8.11675 0.666992 9.1245 0.666992H12.1299C13.1376 0.666992 13.9546 1.51094 13.9546 2.55199C13.9546 3.59305 13.1376 4.43699 12.1299 4.43699H9.1245C8.11675 4.43699 7.2998 3.59305 7.2998 2.55199Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7.2998 25.449C7.2998 26.49 8.11675 27.334 9.1245 27.334H12.1299C13.1376 27.334 13.9546 26.49 13.9546 25.449C13.9546 24.4079 13.1376 23.564 12.1299 23.564H9.1245C8.11675 23.564 7.2998 24.4079 7.2998 25.449Z"
+      fill="currentColor"
+    />
+    <path
+      d="M2.79102 8.29613C2.79102 7.25508 3.60796 6.41113 4.61571 6.41113H12.1292C13.1369 6.41113 13.9539 7.25508 13.9539 8.29613C13.9539 9.33719 13.1369 10.1811 12.1292 10.1811H4.61571C3.60796 10.1811 2.79102 9.33719 2.79102 8.29613Z"
+      fill="currentColor"
+    />
+    <path
+      d="M2.79102 19.7039C2.79102 20.7449 3.60796 21.5889 4.61571 21.5889H12.1292C13.1369 21.5889 13.9539 20.7449 13.9539 19.7039C13.9539 18.6628 13.1369 17.8189 12.1292 17.8189H4.61571C3.60796 17.8189 2.79102 18.6628 2.79102 19.7039Z"
+      fill="currentColor"
+    />
+    <path
+      d="M0 14.094C0 13.0529 0.816945 12.209 1.8247 12.209H12.1289C13.1366 12.209 13.9536 13.0529 13.9536 14.094C13.9536 15.135 13.1366 15.979 12.1289 15.979H1.8247C0.816946 15.979 0 15.135 0 14.094Z"
+      fill="currentColor"
+    />
+    <path
+      d="M22.7002 25.448C22.7002 26.4891 21.8833 27.333 20.8755 27.333H17.8701C16.8624 27.333 16.0454 26.4891 16.0454 25.448C16.0454 24.407 16.8624 23.563 17.8701 23.563H20.8755C21.8832 23.563 22.7002 24.407 22.7002 25.448Z"
+      fill="currentColor"
+    />
+    <path
+      d="M22.7002 2.55199C22.7002 1.51094 21.8833 0.666992 20.8755 0.666992H17.8701C16.8624 0.666992 16.0454 1.51094 16.0454 2.55199C16.0454 3.59305 16.8624 4.43699 17.8701 4.43699H20.8755C21.8832 4.43699 22.7002 3.59305 22.7002 2.55199Z"
+      fill="currentColor"
+    />
+    <path
+      d="M27.209 19.7029C27.209 20.7439 26.392 21.5879 25.3843 21.5879H17.8708C16.8631 21.5879 16.0461 20.7439 16.0461 19.7029C16.0461 18.6618 16.8631 17.8179 17.8708 17.8179H25.3843C26.392 17.8179 27.209 18.6618 27.209 19.7029Z"
+      fill="currentColor"
+    />
+    <path
+      d="M27.209 8.29613C27.209 7.25508 26.392 6.41113 25.3843 6.41113H17.8708C16.8631 6.41113 16.0461 7.25508 16.0461 8.29613C16.0461 9.33719 16.8631 10.1811 17.8708 10.1811H25.3843C26.392 10.1811 27.209 9.33719 27.209 8.29613Z"
+      fill="currentColor"
+    />
+    <path
+      d="M30 14.093C30 13.052 29.1831 12.208 28.1753 12.208H17.8711C16.8634 12.208 16.0464 13.052 16.0464 14.093C16.0464 15.1341 16.8634 15.978 17.8711 15.978H28.1753C29.1831 15.978 30 15.1341 30 14.093Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Logo;
diff --git a/src/modules/mindset/components/header/index.tsx b/src/modules/mindset/components/header/index.tsx
index eb2b5a733..db7e13a93 100644
--- a/src/modules/mindset/components/header/index.tsx
+++ b/src/modules/mindset/components/header/index.tsx
@@ -1,14 +1,39 @@
+import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
+import Logo from '~/components/Icons/Logo'
+import { getAboutData } from '~/network/fetchSourcesData'
+import { colors } from '~/utils/colors'
 
-export const Header = () => (
-  <Head>
-    <Text className="title" color="white">
-      Graph Mindset
-    </Text>
-  </Head>
-)
+export const Header = () => {
+  const [title, setTitle] = useState<string>('')
+
+  useEffect(() => {
+    const fetchTitle = async () => {
+      try {
+        const response = await getAboutData()
+
+        setTitle(response.title || 'Graph Mindset')
+      } catch (error) {
+        console.error('Failed to fetch title:', error)
+      }
+    }
+
+    fetchTitle()
+  }, [])
+
+  return (
+    <Head>
+      <LogoButton>
+        <IconWrapper>
+          <Logo />
+        </IconWrapper>
+      </LogoButton>
+      <StyledText>{title}</StyledText>
+    </Head>
+  )
+}
 
 const Head = styled(Flex).attrs({
   align: 'center',
@@ -18,4 +43,37 @@ const Head = styled(Flex).attrs({
 })`
   height: 64px;
   padding: 20px 23px;
+  gap: 0px;
+`
+
+const LogoButton = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 30px;
+    height: 27px;
+    color: ${colors.white};
+  }
+`
+
+const StyledText = styled(Text)`
+  width: 127px;
+  height: 24px;
+  color: ${colors.white};
+  font-family: Barlow;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0.22px;
+  margin-left: 16px;
+  white-space: nowrap;
 `