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

feat: add filter by tabs for table

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

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

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