From ce36998d69a5d980bf7e255f1cbc1dbb6f417933 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 26 Mar 2024 10:51:45 +0200
Subject: [PATCH] feat(activeValidators): update card and add story

---
 .../ActiveValidators.stories.tsx              | 19 +++++++++++++++++++
 .../ActiveValidators/ActiveValidators.tsx     |  8 +++++---
 src/pages/Dashboard/DashboardContent.tsx      |  4 ++--
 3 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Dashboard/ActiveValidators/ActiveValidators.stories.tsx

diff --git a/src/pages/Dashboard/ActiveValidators/ActiveValidators.stories.tsx b/src/pages/Dashboard/ActiveValidators/ActiveValidators.stories.tsx
new file mode 100644
index 00000000..b87b5139
--- /dev/null
+++ b/src/pages/Dashboard/ActiveValidators/ActiveValidators.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ActiveValidators from './ActiveValidators'
+
+const meta = {
+  title: 'Dashboard/ActiveValidators',
+  component: ActiveValidators,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ActiveValidators>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { count: 6 },
+}
diff --git a/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx b/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
index c535a38c..f5bc0372 100644
--- a/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
+++ b/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
@@ -3,8 +3,10 @@ import { Separator, Stack, XStack, YStack } from 'tamagui'
 
 import DashboardCardWrapper from '../DashboardCardWrapper'
 import Icon from '../../../components/General/Icon'
-
-const ActiveValidators = () => {
+type ActiveValidatorsProps = {
+  count: number
+}
+const ActiveValidators = ({ count }: ActiveValidatorsProps) => {
   return (
     <DashboardCardWrapper padding="0" height="156px" minWidth="250px">
       <img
@@ -29,7 +31,7 @@ const ActiveValidators = () => {
           </Text>
 
           <Text size={27} weight={'semibold'}>
-            6
+            {count}
           </Text>
         </Stack>
         <Separator borderColor={'#e3e3e3'} />
diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx
index 488f9f0f..b8ce749e 100644
--- a/src/pages/Dashboard/DashboardContent.tsx
+++ b/src/pages/Dashboard/DashboardContent.tsx
@@ -13,9 +13,9 @@ import NetworkCard from './NetworkCard/NetworkCard'
 import SyncStatusCards from './SyncStatusCards/SyncStatusCards'
 import MemoryCard from './MemoryCard/MemoryCard'
 import { useWindowSize } from '../../hooks/useWindowSize'
-import ActiveValidators from './ActiveValidators/ActiveValidators'
 
 import ConnectedPeers from './ConnectedPeers/ConnectedPeers'
+import ActiveValidators from './ActiveValidators/ActiveValidators'
 
 const DashboardContent = () => {
   const { width } = useWindowSize()
@@ -47,7 +47,7 @@ const DashboardContent = () => {
         <XStack space="$3">
           <SyncStatusCards />
           <YStack space="$3" flexWrap="wrap">
-            <ActiveValidators></ActiveValidators>
+            <ActiveValidators count={6} />
             <ConnectedPeers></ConnectedPeers>
           </YStack>
         </XStack>