status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-08 01:23:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(data cards): implement fraction values

Browse Source
This commit is contained in:
Hristo Nedelkov 2024-03-14 10:52:45 +02:00
parent 6a7e517d9a
commit 72ada71c60
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/ValidatorManagement/ManageValidator/ValidatorDataCard.tsx
View File

@ -4,14 +4,18 @@ import Icon from '../../../components/General/Icon'
type ValidatorDataCardProps = {
title: string
value: string
value: number
iconPath: string
isFractionResult?: boolean
fractionValue?: number
}
const ValidatorDataCard = ({
title,
value,
iconPath,
isFractionResult,
fractionValue,
}: ValidatorDataCardProps) => {
return (
<XStack
@ -30,9 +34,20 @@ const ValidatorDataCard = ({
<Text size={13} weight={'semibold'} color="#647084">
{title}
</Text>
<Text size={19} weight={'semibold'}>
{value}
</Text>
{isFractionResult ? (
<XStack space="$2">
<Text size={19} weight={'semibold'}>
{fractionValue}
</Text>
<Text size={19} weight={'semibold'} color="#7F7F7F">
/ {value}
</Text>
</XStack>
) : (
<Text size={19} weight={'semibold'}>
{value}
</Text>
)}
</YStack>
</XStack>
)

8
src/pages/ValidatorManagement/ManageValidator/ValidatorDataCards.tsx
View File

@ -15,14 +15,14 @@ const ValidatorDataCards = () => {
}}
>
<ValidatorPeersCard title="Peers" value="67"></ValidatorPeersCard>
<ValidatorDataCard title="Blocks" value="1" iconPath="ghost.png" />
<ValidatorDataCard title="Blocks" value={1900} fractionValue={1023} iconPath="ghost.png" isFractionResult={true}/>
<ValidatorDataCard
title="Attestations"
value="1452"
value={1452}
iconPath="rubiks-cube.png"
/>
<ValidatorDataCard title="Syncs" value="45" iconPath="pacman.png" />
<ValidatorDataCard title="Deposits" value="1" iconPath="toaster.png" />
<ValidatorDataCard title="Syncs" value={45} iconPath="pacman.png" />
<ValidatorDataCard title="Deposits" value={1} iconPath="toaster.png" />
</Stack>
)
}