From b530558e96f2babc3ade319da0d2e1f98aba983d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 30 Aug 2023 15:18:05 +0300
Subject: [PATCH] feat: create Link with arrow component to reuse

---
 src/components/General/LinkWithArrow.tsx | 29 ++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/General/LinkWithArrow.tsx

diff --git a/src/components/General/LinkWithArrow.tsx b/src/components/General/LinkWithArrow.tsx
new file mode 100644
index 00000000..b67298ab
--- /dev/null
+++ b/src/components/General/LinkWithArrow.tsx
@@ -0,0 +1,29 @@
+import { Text } from '@status-im/components'
+import { Link } from 'react-router-dom'
+import { Stack, XStack } from 'tamagui'
+import { ArrowLeftIcon, ArrowRightIcon } from '@status-im/icons'
+
+type LinkWithArrowProps = {
+  text: string
+  to: string
+  arrowLeft?: boolean
+  arrowRight?: boolean
+}
+
+const LinkWithArrow = ({ text, to, arrowLeft, arrowRight }: LinkWithArrowProps) => {
+  return (
+    <Stack style={{ margin: '2% 0 4%', maxWidth: 'fit-content' }}>
+      <Text size={15}>
+        <XStack space={'$1'} style={{ alignItems: 'center' }}>
+          {arrowLeft && <ArrowLeftIcon size={16} color="#2A4CF4" />}
+          <Link style={{ color: '#2A4CF4' }} to={to}>
+            {text}
+          </Link>
+          {arrowRight && <ArrowRightIcon size={16} color="#2A4CF4" />}
+        </XStack>
+      </Text>
+    </Stack>
+  )
+}
+
+export default LinkWithArrow