From b7011e1d1e53615c2cdb64964bf9f06037eaab40 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 10 Aug 2023 12:39:24 +0300
Subject: [PATCH] Implement card with gauge

---
 src/components/DeviceStorageHealth.tsx        | 59 +++++++++++++++++++
 .../LayoutComponent/LandingPage.tsx           |  2 +
 2 files changed, 61 insertions(+)
 create mode 100644 src/components/DeviceStorageHealth.tsx

diff --git a/src/components/DeviceStorageHealth.tsx b/src/components/DeviceStorageHealth.tsx
new file mode 100644
index 00000000..eaf2e62c
--- /dev/null
+++ b/src/components/DeviceStorageHealth.tsx
@@ -0,0 +1,59 @@
+import ShadowBox from './ShadowBox'
+import IconText from './IconText'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import StandardGauge from './StandardGauge'
+
+const DeviceStorageHealth = () => {
+  const currentLoad = 60
+  const message = currentLoad < 80 ? 'Good' : 'Poor'
+  const data = [
+    {
+      id: 'storage',
+      label: 'Storage',
+      value: 450,
+      color: '#E95460',
+    },
+    {
+      id: 'storage',
+      label: 'Storage',
+      value: 45,
+      color: '#E95460',
+    },
+  ]
+  return (
+    <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
+      <YStack>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative', // Make XStack a positioning context
+          }}
+        >
+          <div
+            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100px', height: '100px' }}
+          >
+            <StandardGauge data={data} />
+          </div>
+          <YStack space={'$3'}>
+            <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
+              Storage
+            </Paragraph>
+            <Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
+              {currentLoad} 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
diff --git a/src/components/LayoutComponent/LandingPage.tsx b/src/components/LayoutComponent/LandingPage.tsx
index 5a770a92..c0c97935 100644
--- a/src/components/LayoutComponent/LandingPage.tsx
+++ b/src/components/LayoutComponent/LandingPage.tsx
@@ -3,6 +3,7 @@ import './LandingPage.css'
 import QuickStartBar from '../QuickStartBar/QuickStartBar'
 import DeviceCPULoad from '../DeviceCPULoad'
 import NodesLogo from '../NodesLogo'
+import DeviceStorageHealth from '../DeviceStorageHealth'
 
 function LandingPage() {
   return (
@@ -90,6 +91,7 @@ function Content() {
           Discover Nodes
         </button>
       </article>
+      <DeviceStorageHealth></DeviceStorageHealth>
       <DeviceCPULoad load={[13,32,24,1,49,90,13,32,24,1,49,90]}/>
     </div>
   )