mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-28 11:00:35 +00:00
feat(active validator card): create active validators card
This commit is contained in:
parent
4dc135415d
commit
79ab1f893d
44
src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
Normal file
44
src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
Normal 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
|
@ -13,6 +13,7 @@ import NetworkCard from './NetworkCard/NetworkCard'
|
|||||||
import SyncStatusCards from './SyncStatusCards/SyncStatusCards'
|
import SyncStatusCards from './SyncStatusCards/SyncStatusCards'
|
||||||
import MemoryCard from './MemoryCard/MemoryCard'
|
import MemoryCard from './MemoryCard/MemoryCard'
|
||||||
import { useWindowSize } from '../../hooks/useWindowSize'
|
import { useWindowSize } from '../../hooks/useWindowSize'
|
||||||
|
import ActiveValidators from './ActiveValidators/ActiveValidators'
|
||||||
|
|
||||||
const DashboardContent = () => {
|
const DashboardContent = () => {
|
||||||
const { width } = useWindowSize()
|
const { width } = useWindowSize()
|
||||||
@ -40,10 +41,10 @@ const DashboardContent = () => {
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SyncStatusCards />
|
|
||||||
<AddCardsContainer cardsAmount={2} />
|
|
||||||
|
|
||||||
<BalanceChartCard />
|
<BalanceChartCard />
|
||||||
|
<SyncStatusCards />
|
||||||
|
{/* <AddCardsContainer cardsAmount={2} /> */}
|
||||||
|
<ActiveValidators></ActiveValidators>
|
||||||
</Stack>
|
</Stack>
|
||||||
<BasicInfoCards />
|
<BasicInfoCards />
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user