From 5c745dbd8ffd28e970b84fff4ce783c05a7a2387 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 21 Jul 2023 23:33:34 +0300
Subject: [PATCH] Separate statistic boxes

---
 .../StatisticBox/StatisticBox.jsx             |  7 ---
 .../StatisticBox/StatisticBox.jsx             | 34 ++++++++++++++
 .../StatisticBox/index.jsx                    |  0
 .../StatisticBoxes/StatisticBoxes.jsx         | 44 +++++++++++++++++++
 .../StatisticBoxes/index.jsx                  |  1 +
 5 files changed, 79 insertions(+), 7 deletions(-)
 delete mode 100644 src/pages/DeviceHealthCheck/StatisticBox/StatisticBox.jsx
 create mode 100644 src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx
 rename src/pages/DeviceHealthCheck/{ => StatisticBoxes}/StatisticBox/index.jsx (100%)
 create mode 100644 src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx
 create mode 100644 src/pages/DeviceHealthCheck/StatisticBoxes/index.jsx

diff --git a/src/pages/DeviceHealthCheck/StatisticBox/StatisticBox.jsx b/src/pages/DeviceHealthCheck/StatisticBox/StatisticBox.jsx
deleted file mode 100644
index 34f71c26..00000000
--- a/src/pages/DeviceHealthCheck/StatisticBox/StatisticBox.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ShadowBox } from "../../../components/ShadowBox";
-
-const StatisticBox = ({ children, ...props }) => {
-  return <ShadowBox {...props}>{children}</ShadowBox>;
-};
-
-export { StatisticBox };
diff --git a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx
new file mode 100644
index 00000000..4b5fdfc0
--- /dev/null
+++ b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx
@@ -0,0 +1,34 @@
+import { H3, H4, Separator, Text, XStack, YStack } from "tamagui";
+import { IconText } from "../../../../components/IconText/IconText";
+import { ShadowBox } from "../../../../components/ShadowBox";
+
+const StatisticBox = ({
+  title,
+  memory,
+  stateIcon,
+  stateText,
+  additionalStateText,
+  ...props
+}) => {
+  return (
+    <ShadowBox {...props}>
+      <YStack>
+        <XStack space={"$6"}>
+          <YStack space={"$2"} style={{ padding: "8px 16px" }}>
+            <H4 color={"#09101C"}>{title}</H4>
+            <H3 color={"#09101C"}>{memory}</H3>
+          </YStack>
+        </XStack>
+        <Separator borderColor={"#e3e3e3"} marginVertical={5} />
+        <XStack space={"$4"} style={{ padding: "5px 16px 10px 16px" }}>
+          <IconText icon={stateIcon} text={stateText} fontWeight={"bold"} />
+          {additionalStateText && (
+            <Text color={"#E95460"}>{additionalStateText}</Text>
+          )}
+        </XStack>
+      </YStack>
+    </ShadowBox>
+  );
+};
+
+export { StatisticBox };
diff --git a/src/pages/DeviceHealthCheck/StatisticBox/index.jsx b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/index.jsx
similarity index 100%
rename from src/pages/DeviceHealthCheck/StatisticBox/index.jsx
rename to src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/index.jsx
diff --git a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx
new file mode 100644
index 00000000..f74c3fa9
--- /dev/null
+++ b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx
@@ -0,0 +1,44 @@
+import { XStack, YStack } from "tamagui";
+import { StatisticBox } from "./StatisticBox/StatisticBox";
+
+const StatisticBoxes = () => {
+  return (
+    <YStack space={"$3"}>
+      <XStack space={"$3"}>
+        <StatisticBox
+          style={{
+            border: "1px solid #D92344",
+            backgroundColor: "#F3EAEB",
+          }}
+          title="Storage"
+          memory="30 GB"
+          stateIcon="/icons/warning.png"
+          stateText="Poor"
+          additionalStateText="86% Utilization"
+        />
+        <StatisticBox
+          title="CPU"
+          memory="30 GB"
+          stateIcon="/icons/check-circle.png"
+          stateText="Good"
+        />
+      </XStack>
+      <XStack space={"$3"}>
+        <StatisticBox
+          title="Memory"
+          memory="30 GB"
+          stateIcon="/icons/check-circle.png"
+          stateText="Good"
+        />
+        <StatisticBox
+          title="Network"
+          memory="30 GB"
+          stateIcon="/icons/active.png"
+          stateText="Fair"
+        />
+      </XStack>
+    </YStack>
+  );
+};
+
+export { StatisticBoxes };
diff --git a/src/pages/DeviceHealthCheck/StatisticBoxes/index.jsx b/src/pages/DeviceHealthCheck/StatisticBoxes/index.jsx
new file mode 100644
index 00000000..d4ce049a
--- /dev/null
+++ b/src/pages/DeviceHealthCheck/StatisticBoxes/index.jsx
@@ -0,0 +1 @@
+export { StatisticBoxes } from "./StatisticBoxes";