Merge pull request #34 from status-im/hn.storage-health

[feat] Storage health card

src/components/DeviceStorageHealth.tsx

@@ -0,0 +1,71 @@
+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
+
+    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>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative',
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              right: '44px',
+              width: '75px',
+              height: '75px',
+            }}
+          >
+            <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'}>
+              {storage} GB
+            </Paragraph>
+          </YStack>
+        </XStack>
+        <Separator borderColor={'#e3e3e3'} />
+        <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
+          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+            {message}
+          </IconText>
+          {/* <Text color={'#E95460'}>This is additional text</Text>  */}
+        </XStack>
+      </YStack>
+    </ShadowBox>
+  )
+}
+
+export default DeviceStorageHealth

src/components/StandardGauge.tsx

@@ -14,7 +14,7 @@ interface StandardGaugeProps {
 const StandardGauge = ({ data }: StandardGaugeProps) => (
   <ResponsivePie
     data={data}
-    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
+    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
     innerRadius={0.65}
     colors={datum => datum.data.color}
     fit={false}
@@ -23,6 +23,8 @@ const StandardGauge = ({ data }: StandardGaugeProps) => (
     arcLinkLabelsColor={{ from: 'color' }}
     enableArcLabels={false}
     legends={[]}
+    motionConfig="gentle"  // Define transition style
+    animate={false}         // Enable animation
   />
 )