status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-18 14:26:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: separate table header

Browse Source
This commit is contained in:
RadoslavDimchev 2023-11-20 18:55:24 +02:00
parent 60379eb2bd
commit fc9d9c1f3e
2 changed files with 58 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
View File

@ -3,10 +3,11 @@ import { OptionsIcon } from '@status-im/icons'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import { YStack, XStack } from 'tamagui' import { YStack, XStack } from 'tamagui'
import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants'
import ValidatorProfile from '../../../components/General/ValidatorProfile' import ValidatorProfile from '../../../components/General/ValidatorProfile'
import SearchManagement from './SearchManagement' import SearchManagement from './SearchManagement'
import DropdownFilter from './DropdownFilter' import DropdownFilter from './DropdownFilter'
import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants' import ManagementTableHeader from './ManagementTableHeader'
import './ManagementTable.css' import './ManagementTable.css'
type ManagementTableProps = { type ManagementTableProps = {
@ -67,49 +68,7 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl
<DropdownFilter /> <DropdownFilter />
</XStack> </XStack>
<table> <table>
<thead> <ManagementTableHeader validatorsAmount={filteredValidators.length} />
<tr>
<th>
<Checkbox id="table" variant="outline" />
</th>
<th>
<Text size={15} color={'#647084'}>
{filteredValidators.length} Validators
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Balance
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Income
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Proposals
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Attestations
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Effectiveness
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Status
</Text>
</th>
<th></th>
</tr>
</thead>
<tbody> <tbody>
{filteredValidators.map((validator, index) => ( {filteredValidators.map((validator, index) => (
<tr key={index}> <tr key={index}>

55
src/pages/ValidatorManagement/ManagementTable/ManagementTableHeader.tsx Normal file
View File

@ -0,0 +1,55 @@
import { Checkbox, Text } from '@status-im/components'
type ManagementTableHeaderProps = {
validatorsAmount: number
}
const ManagementTableHeader = ({ validatorsAmount }: ManagementTableHeaderProps) => {
return (
<thead>
<tr>
<th>
<Checkbox id="table" variant="outline" />
</th>
<th>
<Text size={15} color={'#647084'}>
{validatorsAmount} Validators
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Balance
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Income
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Proposals
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Attestations
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Effectiveness
</Text>
</th>
<th>
<Text size={15} color={'#647084'}>
Status
</Text>
</th>
<th></th>
</tr>
</thead>
)
}
export default ManagementTableHeader