dynamically set left storage

src/components/DeviceStorageHealth.tsx

@@ -2,24 +2,31 @@ import ShadowBox from './ShadowBox'
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import StandardGauge from './StandardGauge'
+interface DeviceStorageHealthProps {
+  storage: number
+  maxStorage: number
+}
+const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxStorage }) => {
+  const message = storage < maxStorage ? 'Good' : 'Poor'
+  const data = (storage: number, maxStorage: number) => {
+    const used = storage
+    const free = maxStorage - storage
 
-const DeviceStorageHealth = () => {
+    return [
-  const currentLoad = 60
-  const message = currentLoad < 80 ? 'Good' : 'Poor'
-  const data = [
       {
         id: 'storage',
-      label: 'Storage',
+        label: 'Used',
-      value: 55,
+        value: used,
         color: '#E95460',
       },
       {
         id: 'storage',
-      label: 'Storage',
+        label: 'Free',
-      value: 45,
+        value: free,
         color: '#E7EAEE',
       },
     ]
+  }
   return (
     <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
       <YStack>
@@ -38,14 +45,14 @@ const DeviceStorageHealth = () => {
               height: '75px',
             }}
           >
-            <StandardGauge data={data} />
+            <StandardGauge data={data(storage, maxStorage)} />
           </div>
           <YStack space={'$3'}>
             <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
               Storage
             </Paragraph>
             <Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
-              {currentLoad} GB
+              {storage} GB
             </Paragraph>
           </YStack>
         </XStack>

src/components/LandingPage.tsx

@@ -97,7 +97,7 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceStorageHealth />
+      <DeviceStorageHealth storage={60} maxStorage={100} />
       <DeviceCPULoad load={[13, 32, 24, 1, 49, 90, 13, 32, 24, 1, 49, 90]} />
     </div>
   )

src/components/StandardGauge.tsx

@@ -11,7 +11,6 @@ interface StandardGaugeProps {
 }
 
 const StandardGauge = ({ data }: StandardGaugeProps) => (
-  // <div style={{ width: '75px', height: '75px' }}>
   <ResponsivePie
     data={data}
     margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
@@ -24,7 +23,6 @@ const StandardGauge = ({ data }: StandardGaugeProps) => (
     enableArcLabels={false}
     legends={[]}
   />
-  // </div>
 )
 
 export default StandardGauge