From 0789ad2d7204b530d82b2fe039762124ec8417f0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 12:58:10 +0300
Subject: [PATCH] feat: add connections at tags

---
 src/components/General/TagContainer.tsx | 39 +++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx
index 525961b6..915f4b04 100644
--- a/src/components/General/TagContainer.tsx
+++ b/src/components/General/TagContainer.tsx
@@ -2,19 +2,52 @@ import { Tag } from '@status-im/components'
 import { XStack } from 'tamagui'
 import './TagContainer.css'
 import { ConnectionIcon, AddSmallIcon, SwapIcon } from '@status-im/icons'
+import { useNavigate } from 'react-router'
 
 type TagContainerProps = {
   selectedTag: 'pair' | 'create' | 'connect'
 }
 
 const TagContainer = ({ selectedTag }: TagContainerProps) => {
+  const navigate = useNavigate()
+
+  const onPressConnect = () => {
+    navigate('/connect-device')
+  }
+
+  const onPressPair = () => {
+    navigate('/pair-device')
+  }
+
+  const onPressCreate = () => {
+    navigate('/create-local-node')
+  }
+
   return (
     <XStack space={'$2'} alignItems="center" className="tag-container">
       {selectedTag === 'connect' ? (
-        <Tag selected={selectedTag === 'connect'} icon={ConnectionIcon} label="Connect" size={32} />
+        <Tag
+          selected={selectedTag === 'connect'}
+          icon={ConnectionIcon}
+          label="Connect"
+          size={32}
+          onPress={onPressConnect}
+        />
       ) : null}
-      <Tag selected={selectedTag === 'pair'} icon={SwapIcon} label="Pair" size={32} />
-      <Tag selected={selectedTag === 'create'} icon={AddSmallIcon} label="Create" size={32} />
+      <Tag
+        selected={selectedTag === 'pair'}
+        icon={SwapIcon}
+        label="Pair"
+        size={32}
+        onPress={onPressPair}
+      />
+      <Tag
+        selected={selectedTag === 'create'}
+        icon={AddSmallIcon}
+        label="Create"
+        size={32}
+        onPress={onPressCreate}
+      />
     </XStack>
   )
 }