diff --git a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx index e7e153f6..8f57bef6 100644 --- a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx +++ b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx @@ -1,25 +1,39 @@ -// create component for this file - -import { Stack, YStack } from "tamagui" -import ValidatorListItem from "./ValidatorListItem" -import InputSearch from "./SearchInput" -import { useState } 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 [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' }, + ]; + 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]); return ( - - - - - + {filteredValidators.map(validator => ( + + ))} - ) + ); } -export default ValidatorsList \ No newline at end of file +export default ValidatorsList;