🔨(frontend) encapsulate title component

in order to modularize in the future
the title component is encapsulated.

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
 

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
+              <Title />
-                $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>
             </Box>
           </StyledLink>
         </Box>

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;