From 43cc1772a4db6b0df909f017340ebe9ac37b76b4 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 21 Sep 2023 09:29:06 +0300
Subject: [PATCH] Separate logic in files

---
 .../SyncStatusCards/ConsensusClientCard.tsx   | 63 +++++++++++++++++++
 ...ardContent.tsx => ExecutionClientCard.tsx} |  6 +-
 .../SyncCardContent.stories.ts                |  2 +-
 .../SyncStatusCards/SyncStatusCard.tsx        |  7 ++-
 4 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx
 rename src/pages/Dashboard/SyncStatusCards/{SyncCardContent.tsx => ExecutionClientCard.tsx} (92%)

diff --git a/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx b/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx
new file mode 100644
index 00000000..e61968e2
--- /dev/null
+++ b/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx
@@ -0,0 +1,63 @@
+import { Separator, Stack, XStack, YStack } from 'tamagui'
+import { Shadow, Text } from '@status-im/components'
+import { SwapIcon } from '@status-im/icons'
+import { CSSProperties } from 'react'
+
+import { formatNumberWithComa } from '../../../utilities'
+import IconText from '../../../components/General/IconText'
+import Icon from '../../../components/General/Icon'
+import StandardGauge from '../../../components/Charts/StandardGauge'
+
+type ConsensusCardProps = {
+    title: string
+    value: number
+    total: number
+    isTop?: boolean
+}
+const data = [
+    {
+        id: 'storage',
+        label: 'Used',
+        value: 132156,
+        color: '#ff6161',
+    },
+    {
+        id: 'storage',
+        label: 'Free',
+        value: 200000,
+        color: '#E7EAEE',   
+    },
+]
+const ConsensusCard = ({ title, value, total, isTop }: ConsensusCardProps) => {
+    const style: CSSProperties = {}
+
+    if (isTop === true) {
+        style.borderTopLeftRadius = '16px'
+        style.borderTopRightRadius = '16px'
+    } else if (isTop === false) {
+        style.borderBottomLeftRadius = '16px'
+        style.borderBottomRightRadius = '16px'
+    }
+
+    return (
+        <Shadow variant="$1" style={style}>
+            <YStack>
+                <Stack style={{ minHeight: '90px', padding: '12px 16px' }}>
+                    <Text size={15} weight={'semibold'} color="#647084">
+                        {title}
+                    </Text>
+
+                </Stack>
+                <Separator borderColor={'#e3e3e3'} />
+                <XStack space={'$3'} style={{ padding: '12px 16px' }}>
+                    <IconText icon={<SwapIcon size={16} />}>Syncing</IconText>
+                    <Text size={13} weight={'semibold'}>
+                        {formatNumberWithComa(value)} / {formatNumberWithComa(total)}
+                    </Text>
+                </XStack>
+            </YStack>
+        </Shadow>
+    )
+}
+
+export default ConsensusCard
diff --git a/src/pages/Dashboard/SyncStatusCards/SyncCardContent.tsx b/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx
similarity index 92%
rename from src/pages/Dashboard/SyncStatusCards/SyncCardContent.tsx
rename to src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx
index 04c11cf9..b2819e99 100644
--- a/src/pages/Dashboard/SyncStatusCards/SyncCardContent.tsx
+++ b/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx
@@ -8,7 +8,7 @@ import IconText from '../../../components/General/IconText'
 import Icon from '../../../components/General/Icon'
 import StandardGauge from '../../../components/Charts/StandardGauge'
 
-type SyncCardContentProps = {
+type ExecutionClientCardProps = {
   title: string
   value: number
   total: number
@@ -28,7 +28,7 @@ const data = [
     color: '#E7EAEE',
   },
 ]
-const SyncCardContent = ({ title, value, total, isTop }: SyncCardContentProps) => {
+const ExecutionClientCard = ({ title, value, total, isTop }: ExecutionClientCardProps) => {
   const style: CSSProperties = {}
 
   if (isTop === true) {
@@ -70,4 +70,4 @@ const SyncCardContent = ({ title, value, total, isTop }: SyncCardContentProps) =
   )
 }
 
-export default SyncCardContent
+export default ExecutionClientCard
diff --git a/src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts b/src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts
index 4fc26b5d..045d2054 100644
--- a/src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts
+++ b/src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import SyncCardContent from './SyncCardContent'
+import SyncCardContent from './ExecutionClientCard'
 
 const meta = {
   title: 'Dashboard/SyncCardContent',
diff --git a/src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx b/src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx
index 7cb2efa5..72db87da 100644
--- a/src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx
+++ b/src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx
@@ -1,8 +1,9 @@
 import { Separator, Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
-import SyncCardContent from './SyncCardContent'
 import DashboardCardWrapper from '../DashboardCardWrapper'
+import ExecutionClientCard from './ExecutionClientCard'
+import ConsensusCard from './ConsensusClientCard'
 
 const SyncStatusCard = () => {
   return (
@@ -14,9 +15,9 @@ const SyncStatusCard = () => {
           </Text>
         </Stack>
         <YStack>
-          <SyncCardContent title={'Execution Client'} value={123.424} total={170} isTop={true} />
+          <ConsensusCard title={'Execution Client'} value={123.424} total={170} isTop={true} />
           <Separator borderColor={'#e3e3e3'} />
-          <SyncCardContent title={'Consensus Client'} value={123.424} total={170} isTop={false} />
+          <ExecutionClientCard title={'Consensus Client'} value={123.424} total={170} isTop={false} />
         </YStack>
       </YStack>
     </DashboardCardWrapper>