status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add filter by tabs for table

This commit is contained in:
RadoslavDimchev 2023-11-14 00:35:41 +02:00
parent 9daa0ec2b6
commit 1d242c6e86
2 changed files with 61 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,7 +58,11 @@ const validators = [
},
]
const ManagementTable = () => {
type ManagementTableProps = {
tab: string
}
const ManagementTable = ({ tab }: ManagementTableProps) => {
const [searchValue, setSearchValue] = useState('')
const changeSearchValue = (value: string) => {
@ -155,59 +159,61 @@ const ManagementTable = () => {
</tr>
</thead>
<tbody>
{validators.map((validator, index) => (
<tr key={index}>
<td>
<Checkbox id={index.toString()} variant="outline" />
</td>
<td>
<ValidatorProfile number={validator.number} address={validator.address} />
</td>
<td>
<Text size={15} color={'#647084'} weight={'semibold'}>
{validator.balance}
</Text>
</td>
<td>
<Text size={15} color={'#647084'} weight={'semibold'}>
{validator.income}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.proposals}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.attestations}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.effectiveness}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.deposits}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.rank}
</Text>
</td>
<td>
<Text size={15} color={'#2F80ED'} weight={'semibold'}>
{validator.status}
</Text>
</td>
<td>
<OptionsIcon size={20} color="#647084" style={{ cursor: 'pointer' }} />
</td>
</tr>
))}
{validators
.filter(validator => validator.status === tab)
.map((validator, index) => (
<tr key={index}>
<td>
<Checkbox id={index.toString()} variant="outline" />
</td>
<td>
<ValidatorProfile number={validator.number} address={validator.address} />
</td>
<td>
<Text size={15} color={'#647084'} weight={'semibold'}>
{validator.balance}
</Text>
</td>
<td>
<Text size={15} color={'#647084'} weight={'semibold'}>
{validator.income}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.proposals}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.attestations}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.effectiveness}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.deposits}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.rank}
</Text>
</td>
<td>
<Text size={15} color={'#2F80ED'} weight={'semibold'}>
{validator.status}
</Text>
</td>
<td>
<OptionsIcon size={20} color="#647084" style={{ cursor: 'pointer' }} />
</td>
</tr>
))}
</tbody>
</table>
</YStack>

2
src/pages/ValidatorManagement/ManagementTabs.tsx
View File

@ -42,7 +42,7 @@ const ManagementTabs = () => {
</Stack>
{VALIDATOR_TABS.map(tab => (
<Tabs.Content key={tab.value} value={tab.value} style={{ marginTop: '8px' }}>
<ManagementTable />
<ManagementTable tab={tab.value} />
</Tabs.Content>
))}
</Tabs>