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