From afb942dd968e78466db5ded0496560346706d67d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 11 Aug 2023 13:56:31 +0300
Subject: [PATCH] feat: add all component for the page

---
 .../DeviceHealthCheck/DeviceHealthCheck.tsx   | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
index 93a7cc20..5534bdf7 100644
--- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
+++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
@@ -1,5 +1,12 @@
-import { YStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
 import LayoutComponent from '../../components/LayoutComponent'
+import NimbusLogo from '../../components/NimbusLogo'
+import Titles from '../../components/Titles'
+import DeviceStorageHealth from '../../components/DeviceStorageHealth'
+import DeviceCPULoad from '../../components/DeviceCPULoad'
+import HealthInfoSection from '../../components/HealthInfoSection'
+import { Button, InformationBox } from '@status-im/components'
+import Icon from '../../components/Icon'
 
 const DeviceHealthCheck = () => {
   return (
@@ -15,7 +22,43 @@ export default DeviceHealthCheck
 const DeviceHeanlthCheckContent = () => {
   return (
     <div className="container-inner landing-page">
-      <YStack></YStack>
+      <YStack
+        space={'$4'}
+        style={{ justifyContent: 'end', alignItems: 'start', marginBottom: '2rem' }}
+      >
+        <NimbusLogo />
+        <Stack style={{ width: '39%' }}>
+          <Titles
+            title="Device Health Check"
+            subtitle="Configure your device to start Staking on Nimbus"
+          />
+        </Stack>
+        <XStack space={'$4'}>
+          <DeviceStorageHealth storage={1} maxStorage={2} />
+          <DeviceStorageHealth storage={2} maxStorage={1} />
+        </XStack>
+        <XStack space={'$4'}>
+          <DeviceCPULoad load={[12, 123, 4]} />
+          <DeviceCPULoad load={[1, 4, 23]} />
+        </XStack>
+        <HealthInfoSection
+          usedStorage={120}
+          maxStorage={160}
+          usedRamMemory={8}
+          maxRamMemory={16}
+          cpuClockRate={2.5}
+          networkLatency={75}
+        />
+        <Stack style={{ width: '39%' }}>
+          <InformationBox
+            icon={<Icon src="/icons/close.png" width={11} height={11} />}
+            message="The information provided in the Nodes Health Check is meant to utilized as a guide to guage the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our Health Check Disclosure for more information."
+          />
+        </Stack>
+        <Stack style={{ marginTop: '1rem' }}>
+          <Button>Continue</Button>
+        </Stack>
+      </YStack>
     </div>
   )
 }