feat: add search state, handler and use component
This commit is contained in:
RadoslavDimchev
parent
d9ce02ee18
commit
ea1a8952e6
|
|
@ -1,7 +1,10 @@
|
||||||
import { Checkbox, Text } from '@status-im/components'
|
import { Checkbox, Text } from '@status-im/components'
|
||||||
import { OptionsIcon } from '@status-im/icons'
|
import { OptionsIcon } from '@status-im/icons'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { YStack } from 'tamagui'
|
||||||
|
|
||||||
import ValidatorProfile from '../../../components/General/ValidatorProfile'
|
import ValidatorProfile from '../../../components/General/ValidatorProfile'
|
||||||
|
import SearchManagement from './SearchManagement'
|
||||||
import './ManagementTable.css'
|
import './ManagementTable.css'
|
||||||
|
|
||||||
const validators = [
|
const validators = [
|
||||||
|
|
@ -56,117 +59,126 @@ const validators = [
|
||||||
]
|
]
|
||||||
|
|
||||||
const ManagementTable = () => {
|
const ManagementTable = () => {
|
||||||
|
const [searchValue, setSearchValue] = useState('')
|
||||||
|
|
||||||
|
const changeSearchValue = (value: string) => {
|
||||||
|
setSearchValue(value)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<table>
|
<YStack>
|
||||||
<thead>
|
<SearchManagement searchValue={searchValue} changeSearchValue={changeSearchValue} />
|
||||||
<tr>
|
<table>
|
||||||
<th>
|
<thead>
|
||||||
<Checkbox id="table" variant="outline" />
|
<tr>
|
||||||
</th>
|
<th>
|
||||||
<th>
|
<Checkbox id="table" variant="outline" />
|
||||||
<Text size={15} color={'#647084'}>
|
</th>
|
||||||
{validators.length} Validators
|
<th>
|
||||||
</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'}>
|
|
||||||
Deposits
|
|
||||||
</Text>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<Text size={15} color={'#647084'}>
|
|
||||||
Rank
|
|
||||||
</Text>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<Text size={15} color={'#647084'}>
|
|
||||||
Status
|
|
||||||
</Text>
|
|
||||||
</th>
|
|
||||||
<th></th>
|
|
||||||
</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'}>
|
<Text size={15} color={'#647084'}>
|
||||||
{validator.proposals}
|
{validators.length} Validators
|
||||||
</Text>
|
</Text>
|
||||||
</td>
|
</th>
|
||||||
<td>
|
<th>
|
||||||
<Text size={15} color={'#647084'}>
|
<Text size={15} color={'#647084'}>
|
||||||
{validator.attestations}
|
Balance
|
||||||
</Text>
|
</Text>
|
||||||
</td>
|
</th>
|
||||||
<td>
|
<th>
|
||||||
<Text size={15} color={'#647084'}>
|
<Text size={15} color={'#647084'}>
|
||||||
{validator.effectiveness}
|
Income
|
||||||
</Text>
|
</Text>
|
||||||
</td>
|
</th>
|
||||||
<td>
|
<th>
|
||||||
<Text size={15} color={'#647084'}>
|
<Text size={15} color={'#647084'}>
|
||||||
{validator.deposits}
|
Proposals
|
||||||
</Text>
|
</Text>
|
||||||
</td>
|
</th>
|
||||||
<td>
|
<th>
|
||||||
<Text size={15} color={'#647084'}>
|
<Text size={15} color={'#647084'}>
|
||||||
{validator.rank}
|
Attestations
|
||||||
</Text>
|
</Text>
|
||||||
</td>
|
</th>
|
||||||
<td>
|
<th>
|
||||||
<Text size={15} color={'#2F80ED'} weight={'semibold'}>
|
<Text size={15} color={'#647084'}>
|
||||||
{validator.status}
|
Effectiveness
|
||||||
</Text>
|
</Text>
|
||||||
</td>
|
</th>
|
||||||
<td>
|
<th>
|
||||||
<OptionsIcon size={20} color="#647084" style={{ cursor: 'pointer' }} />
|
<Text size={15} color={'#647084'}>
|
||||||
</td>
|
Deposits
|
||||||
|
</Text>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<Text size={15} color={'#647084'}>
|
||||||
|
Rank
|
||||||
|
</Text>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<Text size={15} color={'#647084'}>
|
||||||
|
Status
|
||||||
|
</Text>
|
||||||
|
</th>
|
||||||
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
{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>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</YStack>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue