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

45
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,26 +18,33 @@ 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">
<Stack <XStack
maxWidth={'120px'} space={'$3'}
style={{ cursor: 'pointer', margin: '8px 0' }} justifyContent="space-between"
alignItems="center"
> >
<Tabs.List size={32} variant="grey"> <Stack
{VALIDATOR_TABS_MANAGEMENT.map(tab => ( maxWidth={'120px'}
<Tabs.Trigger key={tab} type="default" value={tab}> style={{ cursor: 'pointer', margin: '8px 0' }}
{tab} >
</Tabs.Trigger> <Tabs.List size={32} variant="grey">
))} {VALIDATOR_TABS_MANAGEMENT.map(tab => (
</Tabs.List> <Tabs.Trigger key={tab} type="default" value={tab}>
</Stack> {tab}
</div> </Tabs.Trigger>
{VALIDATOR_TABS_MANAGEMENT.map(tab => ( ))}
<Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}> </Tabs.List>
<ManagementTable </Stack>
tab={tab} <SearchManagement
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>