Merge branch 'Create-Dashboard' of https://github.com/nimbus-gui/nimbus-gui into Create-Dashboard

src/pages/Dashboard/Dashboard.tsx

@@ -13,6 +13,7 @@ import TitleLogo from './TitleLogo'
 import StorageCard from './StorageCard/StorageCard'
 import NetworkCard from './NetworkCard/NetworkCard'
 import SyncStatusCard from './SyncStatusCard/SyncStatusCard'
+import MemoryCard from './MemoryCard/MemoryCard'
 
 const Dashboard = () => {
   return (
@@ -43,11 +44,12 @@ const Dashboard = () => {
                 <StorageCard maxStorage={100} storage={82}></StorageCard>
                 <CPUCard load={[12, 31, 3, 2, 24, 98]} />
               </XStack>
-              <XStack>
+              <XStack justifyContent="space-between">
                 <NetworkCard
                   downloadRate={[12, 31, 2, 12, 3, 23]}
                   uploadRate={[31, 12, 3, 13, 3]}
-                ></NetworkCard>
+                />
+                <MemoryCard currentMemory={[21,33,3,42,]} maxMemory={50} />
               </XStack>
             </YStack>
           </XStack>

src/pages/Dashboard/MemoryCard/MemoryCard.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import MemoryCard from './MemoryCard'
+
+const meta = {
+    title: 'Dashboard/MemoryCard',
+    component: MemoryCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof MemoryCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: { currentMemory: [12, 24, 12, 4, 30, 50], maxMemory: 100 },
+}
+export const BadStats: Story = {
+    args: { maxMemory: 60, currentMemory: [2, 5, 7, 32, 23, 12, 89] }
+}

src/pages/Dashboard/MemoryCard/MemoryCard.tsx

@@ -0,0 +1,89 @@
+import StandartLineChart from '../../../components/Charts/StandardLineChart'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import { Shadow as ShadowBox, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
+import IconText from '../../../components/General/IconText'
+
+type DataPoint = {
+    x: number
+    y: number
+}
+
+type ChartData = {
+    id: string
+    color: string
+    data: DataPoint[]
+    maxValue?: number
+}
+
+type MemoryCardProps = {
+    currentMemory: number[]
+    maxMemory: number
+}
+const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
+    const chartData: ChartData[] = [
+        {
+            id: 'cpu',
+            color: '#8DC6BC',
+            data: currentMemory.map((yValue, index: number) => ({
+                x: index + 1,
+                y: yValue,
+            })),
+            maxValue: maxMemory,
+        },
+    ]
+    const currentLoad =
+        chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
+
+    const message = currentLoad < maxMemory ? 'Good' : 'Poor'
+
+    return (
+        <ShadowBox
+            variant="$2"
+            style={{
+                width: '284px',
+                height: '136px',
+                borderRadius: '16px',
+                border: message === 'Poor' ? '1px solid  #D92344' : 'none',
+                backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
+            }}
+        >
+            <YStack>
+                <XStack
+                    justifyContent="space-between"
+                    style={{
+                        padding: '8px 16px',
+                        position: 'relative',
+                    }}
+                >
+                    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+                        <StandartLineChart data={chartData} />
+                    </div>
+                    <YStack space={'$3'}>
+                        <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
+                            Memory
+                        </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' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
+                    >
+                        {message}
+                    </IconText>
+                    {message === 'Poor' && (
+                        <Text size={13} color="#E95460">
+                            {((currentLoad / maxMemory || 0) * 100).toFixed(0)}% Utilization
+                        </Text>
+                    )}
+                </XStack>
+            </YStack>
+        </ShadowBox>
+    )
+}
+
+export default MemoryCard