feat(activeValidators): update card and add story

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 },
+}

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'} />

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>