feat: add real values for props

also add cpuClockRate and networkLatency

src/App.tsx

@@ -29,12 +29,12 @@ function App() {
           <StandardGauge data={data} />
         </div>
         <HealthInfoSection
-          usedStorage={12}
-          maxStorage={20}
-          usedCpuClockRate={23}
-          usedRamMemory={40}
-          maxRamMemory={50}
-          network={30}
+          usedStorage={120}
+          maxStorage={160}
+          usedRamMemory={8}
+          maxRamMemory={16}
+          cpuClockRate={2.5}
+          networkLatency={75}
         />
       </StatusProvider>
     </TamaguiProvider>

src/components/HealthInfoSection.tsx

@@ -6,6 +6,17 @@ const BAD_STORAGE_TEXT = 'Your storage is running low as required for additional
 const CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.'
 const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.'
 const NETWORK_TEXT = 'Network Latency is low.'
+import StatusIconText from './StatusIconText'
+import {
+  BAD_CPU_CLOCK_RATE_TEXT,
+  BAD_NETWORK_TEXT,
+  BAD_RAM_MEMORY_TEXT,
+  BAD_STORAGE_TEXT,
+  GOOD_CPU_CLOCK_RATE_TEXT,
+  GOOD_NETWORK_TEXT,
+  GOOD_RAM_MEMORY_TEXT,
+  GOOD_STORAGE_TEXT,
+} from '../constants'
 
 type HealthInfoSectionProps = {
   usedStorage: number
@@ -29,6 +40,34 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => {
   }, [usedRamMemory, maxRamMemory])
 
   return <YStack space={'$2'}></YStack>
+  return (
+    <YStack space={'$2'}>
+      <StatusIconText
+        percentage={usedStoragePercentage}
+        threshold={80}
+        goodText={GOOD_STORAGE_TEXT}
+        badText={BAD_STORAGE_TEXT}
+      />
+      <StatusIconText
+        percentage={usedStoragePercentage}
+        threshold={80}
+        goodText={GOOD_CPU_CLOCK_RATE_TEXT}
+        badText={BAD_CPU_CLOCK_RATE_TEXT}
+      />
+      <StatusIconText
+        percentage={usedRamMemoryPercentage}
+        threshold={80}
+        goodText={GOOD_RAM_MEMORY_TEXT}
+        badText={BAD_RAM_MEMORY_TEXT}
+      />
+      <StatusIconText
+        percentage={usedStoragePercentage}
+        threshold={80}
+        goodText={GOOD_NETWORK_TEXT}
+        badText={BAD_NETWORK_TEXT}
+      />
+    </YStack>
+  )
 }
 
 export default HealthInfoSection