status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-28 02:50:45 +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 { Tabs } from '@status-im/components'
import { Stack } from 'tamagui' import { Stack, XStack } from 'tamagui'
import { useState } from 'react' import { useState } from 'react'
import ManagementTable from './ManagementTable/ManagementTable'
import { VALIDATOR_TABS_MANAGEMENT } from '../../constants' import { VALIDATOR_TABS_MANAGEMENT } from '../../constants'
import ManagementTable from './ManagementTable/ManagementTable'
import SearchManagement from './ManagementTable/SearchManagement'
import DropdownFilter from './ManagementTable/DropdownFilter'
const ManagementTabs = () => { const ManagementTabs = () => {
const [searchValue, setSearchValue] = useState('') const [searchValue, setSearchValue] = useState('')
@ -16,6 +18,11 @@ const ManagementTabs = () => {
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<Tabs defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}> <Tabs defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}>
<div className="tabs transparent-scrollbar"> <div className="tabs transparent-scrollbar">
<XStack
space={'$3'}
justifyContent="space-between"
alignItems="center"
>
<Stack <Stack
maxWidth={'120px'} maxWidth={'120px'}
style={{ cursor: 'pointer', margin: '8px 0' }} style={{ cursor: 'pointer', margin: '8px 0' }}
@ -28,14 +35,16 @@ const ManagementTabs = () => {
))} ))}
</Tabs.List> </Tabs.List>
</Stack> </Stack>
</div> <SearchManagement
{VALIDATOR_TABS_MANAGEMENT.map(tab => (
<Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
<ManagementTable
tab={tab}
searchValue={searchValue} searchValue={searchValue}
changeSearchValue={changeSearchValue} 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.Content>
))} ))}
</Tabs> </Tabs>