fix: add aome spacing to the validator list
This commit is contained in:
parent
e2bccbb9d6
commit
9a930e3e39
|
@ -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 1',
|
||||||
|
avatarKey: '37880sfsef38fsb',
|
||||||
|
selected: true,
|
||||||
|
isAvatarChipIncluded: true,
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
{ name: 'Validator 2', avatarKey: 'hs880sfsef38fsb', isVerified: true },
|
{ name: 'Validator 2', avatarKey: 'hs880sfsef38fsb', isVerified: true },
|
||||||
{ name: 'Validator 3', avatarKey: '3nh880sfsef38fsb', isAvatarChipIncluded: true },
|
{ name: 'Validator 3', avatarKey: '3nh880sfsef38fsb', isAvatarChipIncluded: true },
|
||||||
{ name: 'Validator 4', avatarKey: 'fh7880sfsef38fsb' },
|
{ name: 'Validator 4', avatarKey: 'fh7880sfsef38fsb' },
|
||||||
{ name: 'Validator 5', avatarKey: 'j77880s..fsef38fsb', isVerified: true },
|
{ name: 'Validator 5', avatarKey: 'j77880s..fsef38fsb', isVerified: true },
|
||||||
];
|
]
|
||||||
const [filteredValidators, setFilteredValidators] = useState(validators);
|
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
|
||||||
|
|
Loading…
Reference in New Issue