Fix file structure and style SyncStatus Cards

src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx

@@ -9,7 +9,6 @@ import Icon from '../../../components/General/Icon'
 import StandardGauge from '../../../components/Charts/StandardGauge'
 
 type ConsensusCardProps = {
-    title: string
     value: number
     total: number
     isTop?: boolean
@@ -25,10 +24,10 @@ const data = [
         id: 'storage',
         label: 'Free',
         value: 200000,
-        color: '#E7EAEE',   
+        color: '#E7EAEE',
     },
 ]
-const ConsensusCard = ({ title, value, total, isTop }: ConsensusCardProps) => {
+const ConsensusCard = ({ value, total, isTop }: ConsensusCardProps) => {
     const style: CSSProperties = {}
 
     if (isTop === true) {
@@ -44,9 +43,19 @@ const ConsensusCard = ({ title, value, total, isTop }: ConsensusCardProps) => {
             <YStack>
                 <Stack style={{ minHeight: '90px', padding: '12px 16px' }}>
                     <Text size={15} weight={'semibold'} color="#647084">
-                        {title}
+                        Consensus Client
                     </Text>
-
+                    <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+                        <Icon src="./icons/vector.svg" height={30} width={60} />
+                        <Stack
+                            style={{
+                                height: '56px',
+                                width: '56px',
+                            }}
+                        >
+                            <StandardGauge data={data} />
+                        </Stack>
+                    </XStack>
                 </Stack>
                 <Separator borderColor={'#e3e3e3'} />
                 <XStack space={'$3'} style={{ padding: '12px 16px' }}>

src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx

@@ -9,7 +9,6 @@ import Icon from '../../../components/General/Icon'
 import StandardGauge from '../../../components/Charts/StandardGauge'
 
 type ExecutionClientCardProps = {
-  title: string
   value: number
   total: number
   isTop?: boolean
@@ -28,7 +27,7 @@ const data = [
     color: '#E7EAEE',
   },
 ]
-const ExecutionClientCard = ({ title, value, total, isTop }: ExecutionClientCardProps) => {
+const ExecutionClientCard = ({ value, total, isTop }: ExecutionClientCardProps) => {
   const style: CSSProperties = {}
 
   if (isTop === true) {
@@ -44,7 +43,7 @@ const ExecutionClientCard = ({ title, value, total, isTop }: ExecutionClientCard
       <YStack>
         <Stack style={{ minHeight: '90px', padding: '12px 16px' }}>
           <Text size={15} weight={'semibold'} color="#647084">
-            {title}
+            Execution Client
           </Text>
           <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
             <Icon src="./icons/vector.svg" height={46} width={93} />

src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import SyncCardContent from './ExecutionClientCard'
-
-const meta = {
-  title: 'Dashboard/SyncCardContent',
-  component: SyncCardContent,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof SyncCardContent>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const ExecutionClient: Story = {
-  args: { title: 'Execution Client', value: 123.424, total: 170, isTop: true },
-}
-
-export const ConsensusClient: Story = {
-  args: { title: 'Consensus Client', value: 123.424, total: 170, isTop: false },
-}
-
-export const WithoutTitle: Story = {
-  args: { title: '', value: 123.424, total: 170 },
-}
-
-export const WithZeroValue: Story = {
-  args: { title: 'Consensus Client', value: 0, total: 170 },
-}
-
-export const WithZeroTotal: Story = {
-  args: { title: 'Consensus Client', value: 123.424, total: 0 },
-}
-
-export const WithZeroValueAndTotal: Story = {
-  args: { title: 'Consensus Client', value: 0, total: 0 },
-}
-
-export const WithoutValues: Story = {
-  args: { title: '', value: 0, total: 0 },
-}
-
-export const WithTopBorders: Story = {
-  args: { title: '', value: 0, total: 0, isTop: true },
-}
-
-export const WithBottomBorders: Story = {
-  args: { title: '', value: 0, total: 0, isTop: false },
-}

src/pages/Dashboard/SyncStatusCards/SyncStatusCard.stories.ts

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import SyncStatusCard from './SyncStatusCard'
-
-const meta = {
-  title: 'Dashboard/SyncStatusCard',
-  component: SyncStatusCard,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof SyncStatusCard>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-}

src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx

@@ -15,9 +15,9 @@ const SyncStatusCard = () => {
           </Text>
         </Stack>
         <YStack>
-          <ConsensusCard title={'Execution Client'} value={123.424} total={170} isTop={true} />
+          <ExecutionClientCard value={123.424} total={170} isTop={false} />
           <Separator borderColor={'#e3e3e3'} />
-          <ExecutionClientCard title={'Consensus Client'} value={123.424} total={170} isTop={false} />
+          <ConsensusCard  value={123.424} total={170} isTop={true} />
         </YStack>
       </YStack>
     </DashboardCardWrapper>