diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx index ac0a78f4..17e78ff7 100644 --- a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx +++ b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx @@ -1,16 +1,35 @@ -import { XStack, YStack } from 'tamagui' -import { Avatar, Checkbox, Text } from '@status-im/components' -import { VerifiedIcon, ContactIcon } from '@status-im/icons' +import { useState } from 'react'; +import { XStack, YStack } from 'tamagui'; +import { Avatar, Checkbox, Text } from '@status-im/components'; +import { VerifiedIcon, ContactIcon } from '@status-im/icons'; + +type ValidatorListItemProps = { + name: string; + avatarKey: string; + selected?: boolean; +}; + +const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps) => { + const [hovered, setHovered] = useState(false); + const [isSelected, setIsSelected] = useState(selected); + + const handleMouseEnter = () => setHovered(true); + const handleMouseLeave = () => setHovered(false); + const handleClick = () => setIsSelected(!isSelected); + + const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent'; -const ValidatorListItem = () => { return ( @@ -31,15 +50,17 @@ const ValidatorListItem = () => { /> - Validator 1 + {name} - Validator 1 + {avatarKey} - + {isSelected && + + } - ) + ); } -export default ValidatorListItem +export default ValidatorListItem;