status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-12 19:36:35 +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

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

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

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

@ -15,14 +15,14 @@ const ValidatorDataCards = () => {
}} }}
> >
<ValidatorPeersCard title="Peers" value="67"></ValidatorPeersCard> <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 <ValidatorDataCard
title="Attestations" title="Attestations"
value="1452" value={1452}
iconPath="rubiks-cube.png" iconPath="rubiks-cube.png"
/> />
<ValidatorDataCard title="Syncs" value="45" iconPath="pacman.png" /> <ValidatorDataCard title="Syncs" value={45} iconPath="pacman.png" />
<ValidatorDataCard title="Deposits" value="1" iconPath="toaster.png" /> <ValidatorDataCard title="Deposits" value={1} iconPath="toaster.png" />
</Stack> </Stack>
) )
} }