status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-27 10:30:31 +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 { 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,26 +18,33 @@ const ManagementTabs = () => {
<div style={{ width: '100%' }}>
<Tabs defaultValue={VALIDATOR_TABS_MANAGEMENT[0]}>
<div className="tabs transparent-scrollbar">
<Stack
maxWidth={'120px'}
style={{ cursor: 'pointer', margin: '8px 0' }}
<XStack
space={'$3'}
justifyContent="space-between"
alignItems="center"
>
<Tabs.List size={32} variant="grey">
{VALIDATOR_TABS_MANAGEMENT.map(tab => (
<Tabs.Trigger key={tab} type="default" value={tab}>
{tab}
</Tabs.Trigger>
))}
</Tabs.List>
</Stack>
</div>
{VALIDATOR_TABS_MANAGEMENT.map(tab => (
<Tabs.Content key={tab} value={tab} style={{ marginTop: '8px' }}>
<ManagementTable
tab={tab}
<Stack
maxWidth={'120px'}
style={{ cursor: 'pointer', margin: '8px 0' }}
>
<Tabs.List size={32} variant="grey">
{VALIDATOR_TABS_MANAGEMENT.map(tab => (
<Tabs.Trigger key={tab} type="default" value={tab}>
{tab}
</Tabs.Trigger>
))}
</Tabs.List>
</Stack>
<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>