feat(active validator card): create active validators card

This commit is contained in:
Hristo Nedelkov 2024-03-13 23:58:47 +02:00 committed by Emil Ivanichkov
parent 4dc135415d
commit 79ab1f893d
2 changed files with 48 additions and 3 deletions

View File

@ -0,0 +1,44 @@
import { Text } from '@status-im/components'
import { Separator, Stack, XStack, YStack } from 'tamagui'
import DashboardCardWrapper from '../DashboardCardWrapper'
const ActiveValidators = () => {
return (
<DashboardCardWrapper padding="0" height="156px" minWidth="200px">
<img
src="/images/validators-count.png"
alt=""
style={{
position: 'absolute',
top: 0,
right: 0,
width: '100px',
height: '100px',
}}
/>
<YStack height="100%">
<Stack
style={{ minHeight: '90px', padding: '12px 16px', flex: 1 }}
justifyContent="space-between"
>
<Text size={19} weight={'semibold'}>
Active Validators
</Text>
<Text size={27} weight={'semibold'}>
6
</Text>
</Stack>
<Separator borderColor={'#e3e3e3'} />
<XStack style={{ padding: '12px 16px' }}>
<Text size={13} weight={'semibold'} color="#09101C">
Manage Validator
</Text>
</XStack>
</YStack>
</DashboardCardWrapper>
)
}
export default ActiveValidators

View File

@ -13,6 +13,7 @@ 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'
const DashboardContent = () => {
const { width } = useWindowSize()
@ -40,10 +41,10 @@ const DashboardContent = () => {
width: '100%',
}}
>
<SyncStatusCards />
<AddCardsContainer cardsAmount={2} />
<BalanceChartCard />
<SyncStatusCards />
{/* <AddCardsContainer cardsAmount={2} /> */}
<ActiveValidators></ActiveValidators>
</Stack>
<BasicInfoCards />