feat: create `Header` component and add it to pages

src/components/General/Header.tsx

@@ -0,0 +1,14 @@
+import { XStack } from 'tamagui'
+import NimbusLogo from '../Logos/NimbusLogo'
+import TagContainer from './TagContainer'
+
+const Header = () => {
+  return (
+    <XStack style={{ justifyContent: 'space-between' }} py={'25px'}>
+      <NimbusLogo />
+      <TagContainer />
+    </XStack>
+  )
+}
+
+export default Header

src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx

@@ -2,13 +2,12 @@ import { useState } from 'react'
 import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
 import { Label, Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
-import NimbusLogo from '../../components/Logos/NimbusLogo'
-import TagContainer from '../../components/General/TagContainer'
 import Titles from '../../components/General/Titles'
 import NodeIcon from '../../components/Icons/NodeIcon'
 import LabelInputField from '../../components/General/LabelInputField'
 import ReactionIcon from '../../components/Icons/ReactionIcon'
 import ColorPicker from '../../components/General/ColorPicker'
+import Header from '../../components/General/Header'
 
 const CreateLocalNodePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@@ -16,10 +15,7 @@ const CreateLocalNodePage = () => {
   return (
     <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png" rightImageLogo={true}>
       <div className="connection-page">
-        <XStack justifyContent={'space-between'}>
-          <NimbusLogo />
-          <TagContainer />
-        </XStack>
+        <Header />
         <article className="content">
           <Titles
             title="Create Local Node"

src/pages/PairDevice/PairDevice.tsx

@@ -1,17 +1,15 @@
 import { Separator, XStack, YStack } from 'tamagui'
 import { useState } from 'react'
-import { Button, Checkbox, Tag, Text } from '@status-im/components'
+import { Button, Checkbox, Text } from '@status-im/components'
 
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
-import NimbusLogo from '../../components/Logos/NimbusLogo'
-import PairIcon from '../../components/Icons/PairIcon'
-import CreateIcon from '../../components/Icons/CreateIcon'
 import NodeIcon from '../../components/Icons/NodeIcon'
 import Titles from '../../components/General/Titles'
 import PairedSuccessfully from './PairedSuccessfully'
 import { CreateAvatar } from './CreateAvatar'
 import GenerateId from './GenerateId'
+import Header from '../../components/General/Header'
 
 const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
@@ -31,13 +29,7 @@ const PairDevice = () => {
           maxWidth: '100%',
         }}
       >
-        <XStack style={{ justifyContent: 'space-between' }}>
-          <NimbusLogo />
-          <XStack space={'$2'} style={{ alignItems: 'center' }}>
-            <Tag icon={PairIcon} label="Pair" size={32} selected />
-            <Tag icon={CreateIcon} label="Create" size={32} />
-          </XStack>
-        </XStack>
+        <Header />
         <Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
         {isPaired ? <PairedSuccessfully /> : <GenerateId isAwaitingPairing={isAwaitingPairing} />}
         {!isPaired && (