From a7cb824cd1c986d8488471562fe5c39a211d4d20 Mon Sep 17 00:00:00 2001
From: rvveber <weber@b1-systems.de>
Date: Mon, 2 Dec 2024 16:54:30 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8(frontend)=20encapsulate=20title=20?=
 =?UTF-8?q?component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

in order to modularize in the future
the title component is encapsulated.
---
 CHANGELOG.md                                  |  4 +++
 .../src/features/header/components/Header.tsx | 28 ++---------------
 .../header/components/Title/Title.tsx         | 31 +++++++++++++++++++
 3 files changed, 38 insertions(+), 25 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/header/components/Title/Title.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46e174b20b..11b14a3b07 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Changed
+
+- 🔨(frontend) encapsulated title to its own component #474
+
 
 ## [1.8.2] - 2024-11-28
 
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index e03a0d6cd6..c467fd133d 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, StyledLink, Text } from '@/components/';
+import { Box, StyledLink } from '@/components/';
 import { ButtonLogin } from '@/core/auth';
 import { LanguagePicker } from '@/features/language';
 import { useResponsiveStore } from '@/stores';
@@ -11,6 +11,7 @@ import { default as IconDocs } from '../assets/icon-docs.svg?url';
 
 import { DropdownMenu } from './DropdownMenu';
 import { LaGaufre } from './LaGaufre';
+import Title from './Title/Title';
 
 export const Header = () => {
   const { t } = useTranslation();
@@ -45,30 +46,7 @@ export const Header = () => {
               $margin={{ top: 'auto' }}
             >
               <Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
-              <Text
-                $padding="2px 3px"
-                $size="8px"
-                $background="#368bd6"
-                $color="white"
-                $position="absolute"
-                $radius="5px"
-                $css={`
-                  bottom: 13px;
-                  right: -17px;
-                `}
-              >
-                BETA
-              </Text>
-              <Text
-                $margin="none"
-                as="h2"
-                $color="#000091"
-                $zIndex={1}
-                $size="1.30rem"
-                $css="font-family: 'Marianne'"
-              >
-                {t('Docs')}
-              </Text>
+              <Title />
             </Box>
           </StyledLink>
         </Box>
diff --git a/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx b/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx
new file mode 100644
index 0000000000..ae4b9874cf
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+
+import { Text } from '@/components/';
+
+const Title = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Text
+        $padding="2px 3px"
+        $size="8px"
+        $background="#368bd6"
+        $color="white"
+        $position="absolute"
+        $radius="5px"
+        $css={`
+          bottom: 13px;
+          right: -17px;
+        `}
+      >
+        BETA
+      </Text>
+      <Text $margin="none" as="h2" $color="#000091" $zIndex={1} $size="1.30rem">
+        {t('Docs')}
+      </Text>
+    </>
+  );
+};
+
+export default Title;