status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add dropdown menu for filter

This commit is contained in:
RadoslavDimchev 2023-11-11 23:07:39 +02:00
parent c376daa932
commit 0ed0a015da
1 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
View File

@ -1,4 +1,4 @@
import { Checkbox, Text } from '@status-im/components' import { Checkbox, DropdownMenu, Text } from '@status-im/components'
import { OptionsIcon, SortIcon } from '@status-im/icons' import { OptionsIcon, SortIcon } from '@status-im/icons'
import { useState } from 'react' import { useState } from 'react'
import { YStack, XStack, Stack } from 'tamagui' import { YStack, XStack, Stack } from 'tamagui'
@ -69,30 +69,36 @@ const ManagementTable = () => {
<YStack> <YStack>
<XStack space={'$3'} justifyContent="space-between" alignItems="center"> <XStack space={'$3'} justifyContent="space-between" alignItems="center">
<SearchManagement searchValue={searchValue} changeSearchValue={changeSearchValue} /> <SearchManagement searchValue={searchValue} changeSearchValue={changeSearchValue} />
<Stack style={{ position: 'relative', display: 'flex', alignItems: 'center' }}> <DropdownMenu>
<SortIcon <Stack style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
size={20} <SortIcon
color="#647084" size={20}
style={{ color="#647084"
border: '1px solid #DCE0E5', style={{
borderRadius: '10px', border: '1px solid #DCE0E5',
padding: '8px', borderRadius: '10px',
cursor: 'pointer', padding: '8px',
}} cursor: 'pointer',
/> }}
<Stack />
style={{ <Stack
position: 'absolute', style={{
right: -2, position: 'absolute',
top: -1.5, right: -2,
width: '9px', top: -1.5,
height: '9px', width: '9px',
borderRadius: '50%', height: '9px',
backgroundColor: '#1992D7', borderRadius: '50%',
border: '1.5px solid #fff', backgroundColor: '#1992D7',
}} border: '1.5px solid #fff',
/> }}
</Stack> />
</Stack>
<DropdownMenu.Content sideOffset={5} position="absolute" zIndex={999}>
<DropdownMenu.Item key={'name'} label={'name'} onSelect={() => {}} />
<DropdownMenu.Item key={'address'} label={'address'} onSelect={() => {}} />
</DropdownMenu.Content>
</DropdownMenu>
</XStack> </XStack>
<table> <table>
<thead> <thead>