Separate logic in files

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

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

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',

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>