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

fix: add aome spacing to the validator list

This commit is contained in:
Ivana Andersson 2023-09-27 17:51:21 +03:00
parent e2bccbb9d6
commit 9a930e3e39
1 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/Dashboard/RightSideBar/ValidatorsList.tsx
View File

@ -1,40 +1,46 @@
import { Stack, YStack } from "tamagui"; import { Stack, YStack } from 'tamagui'
import ValidatorListItem from "./ValidatorListItem"; import ValidatorListItem from './ValidatorListItem'
import InputSearch from "./SearchInput"; import InputSearch from './SearchInput'
import { useState, useEffect } from "react"; import { useState, useEffect } from 'react'
const ValidatorsList = () => { const ValidatorsList = () => {
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('')
const validators = [ const validators = [
{ name: 'Validator 1', avatarKey: '37880sfsef38fsb', selected: true, isAvatarChipIncluded: true, isVerified: true }, {
{ name: 'Validator 2', avatarKey: 'hs880sfsef38fsb', isVerified: true }, name: 'Validator 1',
{ name: 'Validator 3', avatarKey: '3nh880sfsef38fsb', isAvatarChipIncluded: true }, avatarKey: '37880sfsef38fsb',
{ name: 'Validator 4', avatarKey: 'fh7880sfsef38fsb' }, selected: true,
{ name: 'Validator 5', avatarKey: 'j77880s..fsef38fsb' , isVerified: true}, isAvatarChipIncluded: true,
]; isVerified: true,
const [filteredValidators, setFilteredValidators] = useState(validators); },
{ name: 'Validator 2', avatarKey: 'hs880sfsef38fsb', isVerified: true },
{ name: 'Validator 3', avatarKey: '3nh880sfsef38fsb', isAvatarChipIncluded: true },
{ name: 'Validator 4', avatarKey: 'fh7880sfsef38fsb' },
{ name: 'Validator 5', avatarKey: 'j77880s..fsef38fsb', isVerified: true },
]
const [filteredValidators, setFilteredValidators] = useState(validators)
useEffect(() => { useEffect(() => {
if (searchValue) { if (searchValue) {
const filtered = validators.filter(validator => const filtered = validators.filter(validator =>
validator.name.toLowerCase().includes(searchValue.toLowerCase()) validator.name.toLowerCase().includes(searchValue.toLowerCase()),
); )
setFilteredValidators(filtered); setFilteredValidators(filtered)
} else { } else {
setFilteredValidators(validators); setFilteredValidators(validators)
} }
}, [searchValue, validators]); }, [searchValue, validators])
return ( return (
<Stack> <Stack>
<InputSearch value={searchValue} setValue={setSearchValue} /> <InputSearch value={searchValue} setValue={setSearchValue} />
<YStack space={'$1'}> <YStack space={'$1'} mt={'16px'}>
{filteredValidators.map(validator => ( {filteredValidators.map(validator => (
<ValidatorListItem {...validator} /> <ValidatorListItem {...validator} />
))} ))}
</YStack> </YStack>
</Stack> </Stack>
); )
} }
export default ValidatorsList; export default ValidatorsList