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 @@ + + + + + + + + + + + + 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> = (props) => ( + + + + + + + + + + + + +); + +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 = () => ( - - - Graph Mindset - - -) +export const Header = () => { + const [title, setTitle] = useState('') + + 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 ( + + + + + + + {title} + + ) +} 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; `