From be3c19498638fff039bef27128cf83f771827ed5 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 29 Aug 2023 12:07:48 +0300
Subject: [PATCH] Implement Activation Sync card

---
 .../Activation/ActivationSyncCard.tsx         | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx

diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx
new file mode 100644
index 00000000..2537f1f1
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx
@@ -0,0 +1,47 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import StandardGauge from '../../../components/Charts/StandardGauge'
+import { Text } from '@status-im/components'
+import BorderBox from '../../../components/General/BorderBox'
+
+type ActivationSyncCardProps = {
+  synced: number
+  total: number
+  color: string
+}
+
+const ActivationSyncCard = ({ synced, total, color }: ActivationSyncCardProps) => {
+  return (
+    <XStack space={'$2'} alignItems="center">
+      <Stack
+        style={{
+          height: '35px',
+          width: '35px',
+        }}
+      >
+        <StandardGauge
+          data={[
+            {
+              id: 'sync card',
+              label: 'Sync Status',
+              value: synced,
+              color: color,
+            },
+            {
+              id: 'free',
+              label: 'free',
+              value: total - synced || 1,
+              color: '#E7EAEE',
+            },
+          ]}
+        />
+      </Stack>
+      <YStack>
+        <Text size={15} weight={'semibold'}>
+          {synced} / {total}
+        </Text>
+      </YStack>
+    </XStack>
+  )
+}
+
+export default ActivationSyncCard