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 = () => {
-  const currentLoad = 60
-  const message = currentLoad < 80 ? 'Good' : 'Poor'
-  const data = [
-    {
-      id: 'storage',
-      label: 'Storage',
-      value: 55,
-      color: '#E95460',
-    },
-    {
-      id: 'storage',
-      label: 'Storage',
-      value: 45,
-      color: '#E7EAEE',
-    },
-  ]
+    return [
+      {
+        id: 'storage',
+        label: 'Used',
+        value: used,
+        color: '#E95460',
+      },
+      {
+        id: 'storage',
+        label: 'Free',
+        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

@@ -3,7 +3,7 @@ import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
 import DeviceStorageHealth from './DeviceStorageHealth'
 import DeviceCPULoad from './DeviceCPULoad'
- 
+
 function LandingPage() {
   return (
     <>
@@ -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,20 +11,18 @@ interface StandardGaugeProps {
 }
 
 const StandardGauge = ({ data }: StandardGaugeProps) => (
-  // <div style={{ width: '75px', height: '75px' }}>
-    <ResponsivePie
-      data={data}
-      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
-      innerRadius={0.65}
-      colors={datum => datum.data.color}
-      fit={false}
-      activeOuterRadiusOffset={8}
-      enableArcLinkLabels={false}
-      arcLinkLabelsColor={{ from: 'color' }}
-      enableArcLabels={false}
-      legends={[]}
-    />
-  // </div>
+  <ResponsivePie
+    data={data}
+    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+    innerRadius={0.65}
+    colors={datum => datum.data.color}
+    fit={false}
+    activeOuterRadiusOffset={8}
+    enableArcLinkLabels={false}
+    arcLinkLabelsColor={{ from: 'color' }}
+    enableArcLabels={false}
+    legends={[]}
+  />
 )
 
 export default StandardGauge