Merge branch 'Create-Dashboard' of github.com:nimbus-gui/nimbus-gui into Create-Dashboard

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
           </Tabs.Trigger>
         </Tabs.List>
-        <Tabs.Content value="active" style={{ marginTop: '16px' }}>
-          <InputSearch />
-          <YStack space={'$2'} mt="16px">
-            <ValidatorListItem name={'Validator 1'} avatarKey={'37880sfsef38fsb'} selected={true} />
-            <ValidatorListItem name={'Validator 2'} avatarKey={'37880sfsef38fsb'} />
-            <ValidatorListItem name={'Validator 3'} avatarKey={'37880sfsef38fsb'} />
-            <ValidatorListItem name={'Validator 4'} avatarKey={'37880sfsef38fsb'} />
-          </YStack>
+        <Tabs.Content value="active">
+          <ValidatorsList />
         </Tabs.Content>
         <Tabs.Content value="pending">
           <ValidatorListItem name={'Validator 5'} avatarKey={'37880sfsef38fsb'} />

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 (
         <>

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<typeof ValidatorListItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: { avatarKey: '37880sfsef38fsb', name: 'Validator 1', selected: true, isAvatarChipIncluded: true, isVerified: true },
+}

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
         <YStack pl="8px">
           <Text size={13} weight={'semibold'}>
             {name}
-            <VerifiedIcon size={20} /> <ContactIcon size={20} />
+            {isVerified && <VerifiedIcon size={20} />}
+            {isAvatarChipIncluded && <ContactIcon size={20} />}
           </Text>
           <Text size={13}>{avatarKey}</Text>
         </YStack>

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<typeof ValidatorsList>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {},
+}

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 (
+        <Stack>
+            <InputSearch value={searchValue} setValue={setSearchValue} />
+            <YStack space={'$1'}>
+                {filteredValidators.map(validator => (
+                    <ValidatorListItem {...validator} />
+                ))}
+            </YStack>
+        </Stack>
+    );
+}
+
+export default ValidatorsList;