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 ValidatorListItem from "./ValidatorListItem";
import InputSearch from "./SearchInput";
import { useState, useEffect } from "react";
import { Stack, YStack } from 'tamagui'
import ValidatorListItem from './ValidatorListItem'
import InputSearch from './SearchInput'
import { useState, useEffect } from 'react'
const ValidatorsList = () => {
const [searchValue, setSearchValue] = useState('');
const validators = [
{ name: 'Validator 1', avatarKey: '37880sfsef38fsb', selected: true, isAvatarChipIncluded: true, isVerified: true },
{ 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);
const [searchValue, setSearchValue] = useState('')
const validators = [
{
name: 'Validator 1',
avatarKey: '37880sfsef38fsb',
selected: true,
isAvatarChipIncluded: true,
isVerified: true,
},
{ 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(() => {
if (searchValue) {
const filtered = validators.filter(validator =>
validator.name.toLowerCase().includes(searchValue.toLowerCase())
);
setFilteredValidators(filtered);
} else {
setFilteredValidators(validators);
}
}, [searchValue, validators]);
useEffect(() => {
if (searchValue) {
const filtered = validators.filter(validator =>
validator.name.toLowerCase().includes(searchValue.toLowerCase()),
)
setFilteredValidators(filtered)
} else {
setFilteredValidators(validators)
}
}, [searchValue, validators])
return (
<Stack>
<InputSearch value={searchValue} setValue={setSearchValue} />
<YStack space={'$1'}>
{filteredValidators.map(validator => (
<ValidatorListItem {...validator} />
))}
</YStack>
</Stack>
);
return (
<Stack>
<InputSearch value={searchValue} setValue={setSearchValue} />
<YStack space={'$1'} mt={'16px'}>
{filteredValidators.map(validator => (
<ValidatorListItem {...validator} />
))}
</YStack>
</Stack>
)
}
export default ValidatorsList;
export default ValidatorsList