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

src/pages/Dashboard/AddCardsContainer.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import AddCardsContainer from './AddCardsContainer'
+
+const meta = {
+  title: 'Dashboard/AddCardsContainer',
+  component: AddCardsContainer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AddCardsContainer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}

src/pages/Dashboard/AddCardsContainer.tsx

@@ -0,0 +1,19 @@
+import { YStack } from 'tamagui'
+import AddCard from '../../components/General/AddCard'
+
+const AddCardsContainer = () => {
+  return (
+    <YStack
+      style={{
+        borderRadius: '16px',
+        boxShadow: '0 0 8px rgba(0, 0, 0, 0.1)',
+        width: 'fit-content',
+      }}
+    >
+      <AddCard />
+      <AddCard />
+    </YStack>
+  )
+}
+
+export default AddCardsContainer

src/pages/Dashboard/BasicInfoCards/BasicInfoCard.tsx

@@ -1,6 +1,7 @@
 import { Text } from '@status-im/components'
 import { YStack } from 'tamagui'
-import DashboardCardWrapper from './DashboardCardWrapper'
+
+import DashboardCardWrapper from '../DashboardCardWrapper'
 
 type BasicInfoCardProps = {
   title: string

src/pages/Dashboard/BasicInfoCards/BasicInfoCards.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import BasicInfoCards from './BasicInfoCards'
+
+const meta = {
+  title: 'Dashboard/BasicInfoCards',
+  component: BasicInfoCards,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof BasicInfoCards>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}

src/pages/Dashboard/BasicInfoCards/BasicInfoCards.tsx

@@ -0,0 +1,24 @@
+import { Stack } from 'tamagui'
+
+import BasicInfoCard from './BasicInfoCard'
+
+const BasicInfoCards = () => {
+  return (
+    <Stack
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(5, 1fr)',
+        gap: '20px',
+        width: '100%',
+      }}
+    >
+      <BasicInfoCard title="Active Validators" value="6" />
+      <BasicInfoCard title="Connected Peers" value="16" />
+      <BasicInfoCard title="At Headslot" value="-6" />
+      <BasicInfoCard title="Avg. Effectiveness" value="4" />
+      <BasicInfoCard title="Participation Rate" value="6" />
+    </Stack>
+  )
+}
+
+export default BasicInfoCards

src/pages/Dashboard/Dashboard.tsx

@@ -1,24 +1,14 @@
-import { Stack, XStack } from 'tamagui'
-import BasicInfoCard from './BasicInfoCard'
+import { YStack } from 'tamagui'
+
+import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
+import AddCardsContainer from './AddCardsContainer'
 
 const Dashboard = () => {
   return (
-    <XStack>
-      <Stack
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(5, 1fr)',
-          gap: '20px',
-          width: '100%',
-        }}
-      >
-        <BasicInfoCard title="Active Validators" value="6" />
-        <BasicInfoCard title="Connected Peers" value="16" />
-        <BasicInfoCard title="At Headslot" value="-6" />
-        <BasicInfoCard title="Avg. Effectiveness" value="4" />
-        <BasicInfoCard title="Participation Rate" value="6" />
-      </Stack>
-    </XStack>
+    <YStack space={'$2'}>
+      <AddCardsContainer />
+      <BasicInfoCards />
+    </YStack>
   )
 }
 

src/pages/Dashboard/DashboardCardWrapper.tsx

@@ -14,7 +14,7 @@ const DashboardCardWrapper = ({ children }: DashboardCardWrapperProps) => {
       }}
     >
       {children}
-    </Stack>
+    </Stack> 
   )
 }