From 29769e11973bd20b191d37420af0f5c4fef1212e Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 15 Sep 2023 16:08:48 +0300
Subject: [PATCH] Create ExecutionUptime.tsx

---
 .../ExecutionUptime/ExecutionUptime.tsx       | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx

diff --git a/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx b/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
new file mode 100644
index 00000000..454051ee
--- /dev/null
+++ b/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
@@ -0,0 +1,70 @@
+import { Shadow, Text } from '@status-im/components';
+import { Stack, XStack, YStack } from 'tamagui';
+import Icon from '../../../components/General/Icon';
+import UptimeChart from '../UptimeChart/UptimeChart';
+
+const data: DataItem[] = [
+    {
+        // @NOTE: if you want to add name in the XAxis. You need to set the names here
+        pv: 1,
+        pa: 1,
+    },
+    {
+        pv: 0,
+        pa: 0
+    },
+    {
+        pv: 0,
+        pa: 0
+    },
+    {
+        pv: 0,
+        pa: 1
+    },
+    {
+        pv: 0,
+        pa: 0
+    },
+    {
+        pv: 1,
+        pa: 0
+    },
+    {
+        pv: 0,
+        pa: 1
+    },
+];
+
+interface DataItem {
+    name?: string;
+    pa: number;
+    pv: number;
+}
+
+const ExecutionUptime = () => {
+    return (
+        <Shadow
+            variant="$2"
+            style={{
+                borderRadius: '16px',
+            }}
+        >
+            <YStack space={'$3'} width={'260px'} height={'156px'} padding={'$3'}>
+                <YStack>
+                    <Text size={15} weight={'semibold'}> Execution Uptime</Text>
+                    <XStack style={{ alignItems: 'end', }} space={'$2'} >
+                        <Text size={27} weight={'semibold'}>99%</Text>
+                        <Icon src='/icons/positive.svg' width={13}></Icon>
+                        <Text size={13} color="#E95460" >2%</Text>
+                    </XStack>
+                </YStack>
+                <XStack height={'50%'} justifyContent="center" alignItems="center">
+                    <Stack style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '228px', height: '100%' }}>
+                        <UptimeChart data={data} />
+                    </Stack>
+                </XStack>
+            </YStack>
+        </Shadow >
+    );
+}
+export default ExecutionUptime;
\ No newline at end of file