diff --git a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx index 61fe018d..c3e49d27 100644 --- a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx +++ b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx @@ -1,9 +1,9 @@ import { Avatar, InformationBox, Tabs, Text } from '@status-im/components' import { XStack, YStack } from 'tamagui' import ValidatorListItem from './ValidatorListItem' -import InputSearch from './SearchInput' import { CloseCircleIcon, ChevronRightIcon } from '@status-im/icons' import AddCard from '../../../components/General/AddCards/AddCard' +import ValidatorsList from './ValidatorsList' const RightSidebar = () => { return ( @@ -42,14 +42,8 @@ const RightSidebar = () => { Inactive - - - - - - - - + + diff --git a/src/pages/Dashboard/RightSideBar/SearchInput.tsx b/src/pages/Dashboard/RightSideBar/SearchInput.tsx index d8edab92..eecd2d27 100644 --- a/src/pages/Dashboard/RightSideBar/SearchInput.tsx +++ b/src/pages/Dashboard/RightSideBar/SearchInput.tsx @@ -1,9 +1,11 @@ import { Input } from "@status-im/components" import { SearchIcon } from "@status-im/icons" -import { useState } from "react" -const InputSearch = () => { - const [value, setValue] = useState('') +type InputSearchProps = { + value: string + setValue: (value: string) => void +} +const InputSearch = ({ value, setValue }: InputSearchProps) => { return ( <> diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx new file mode 100644 index 00000000..0446b9c6 --- /dev/null +++ b/src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorListItem from './ValidatorListItem' + +const meta = { + title: 'Dashboard/ValidatorListItem', + component: ValidatorListItem, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { avatarKey: '37880sfsef38fsb', name: 'Validator 1', selected: true, isAvatarChipIncluded: true, isVerified: true }, +} diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx index 60737660..29b3c059 100644 --- a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx +++ b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx @@ -6,10 +6,18 @@ import { VerifiedIcon, ContactIcon } from '@status-im/icons' type ValidatorListItemProps = { name: string avatarKey: string + isAvatarChipIncluded?: boolean + isVerified?: boolean selected?: boolean } -const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps) => { +const ValidatorListItem = ({ + name, + avatarKey, + selected, + isAvatarChipIncluded, + isVerified, +}: ValidatorListItemProps) => { const [hovered, setHovered] = useState(false) const [isSelected, setIsSelected] = useState(selected) @@ -51,7 +59,8 @@ const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps {name} - + {isVerified && } + {isAvatarChipIncluded && } {avatarKey} diff --git a/src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx b/src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx new file mode 100644 index 00000000..4595448e --- /dev/null +++ b/src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorsList from './ValidatorsList' + +const meta = { + title: 'Dashboard/ValidatorsList', + component: ValidatorsList, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: {}, +} diff --git a/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx new file mode 100644 index 00000000..7192b7c1 --- /dev/null +++ b/src/pages/Dashboard/RightSideBar/ValidatorsList.tsx @@ -0,0 +1,40 @@ +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); + + 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;