Merge branch 'Create-Dashboard' of https://github.com/nimbus-gui/nimbus-gui into Create-Dashboard

src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx

@@ -1,7 +1,18 @@
 import { YStack } from 'tamagui'
+import { formatNumberForGauge } from '../../../utilities'
 
-const SyncCardContent = () => {
-  return <YStack>Client</YStack>
+type SyncCardContentProps = {
+  title: string
+  value: number
+  total: number
+}
+
+const SyncCardContent = ({ title, value, total }: SyncCardContentProps) => {
+  return (
+    <YStack>
+      {title} {formatNumberForGauge(value)} / {formatNumberForGauge(total)}
+    </YStack>
+  )
 }
 
 export default SyncCardContent

src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx

@@ -1,14 +1,17 @@
 import { YStack } from 'tamagui'
 
 import SyncCardContent from './SyncCardContent'
+import DashboardCardWrapper from '../DashboardCardWrapper'
 
 const SyncStatusCard = () => {
   return (
-    <YStack space={'$2'}>
-      Sync Status
-      <SyncCardContent />
-      <SyncCardContent />
-    </YStack>
+    <DashboardCardWrapper padding="0">
+      <YStack space={'$2'}>
+        Sync Status
+        <SyncCardContent title={'Execution Client'} value={123.424} total={170.0} />
+        <SyncCardContent title={'Consensus Client'} value={123.424} total={170.0} />
+      </YStack>
+    </DashboardCardWrapper>
   )
 }