status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-27 18:40:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(management-tabs): add search bar and filter

Browse Source
This commit is contained in:
RadoslavDimchev 2024-04-02 14:34:15 +03:00 committed by Emil Ivanichkov
parent 38151d5062
commit 4f85f67601
1 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/ValidatorManagement/ManagementTabs.tsx
View File

@ -1,9 +1,11 @@
import { Tabs } from '@status-im/components'
import { Stack } from 'tamagui'
import { Stack, XStack } from 'tamagui'
import { useState } from 'react'
import ManagementTable from './ManagementTable/ManagementTable'
import { VALIDATOR_TABS_MANAGEMENT } from '../../constants'
import ManagementTable from './ManagementTable/ManagementTable'
import SearchManagement from './ManagementTable/SearchManagement'
import DropdownFilter from './ManagementTable/DropdownFilter'
const ManagementTabs = () => {
const [searchValue, setSearchValue] = useState('')
@ -16,6 +18,11 @@ const ManagementTabs = () => {
<div style={{ width: '100%' }}>
<Tabs defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}>
<div className="tabs transparent-scrollbar">
<XStack
space={'$3'}
justifyContent="space-between"
alignItems="center"
>
<Stack
maxWidth={'120px'}
style={{ cursor: 'pointer', margin: '8px 0' }}
@ -28,14 +35,16 @@ const ManagementTabs = () => {
))}
</Tabs.List>
</Stack>
</div>
{VALIDATOR_TABS_MANAGEMENT.map(tab => (
<Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
<ManagementTable
tab={tab}
<SearchManagement
searchValue={searchValue}
changeSearchValue={changeSearchValue}
/>
<DropdownFilter />
</XStack>
</div>
{VALIDATOR_TABS_MANAGEMENT.map(tab => (
<Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
<ManagementTable tab={tab} searchValue={searchValue} />
</Tabs.Content>
))}
</Tabs>