From 0ed0a015daece476e0ad76784ec932176f540e90 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sat, 11 Nov 2023 23:07:39 +0200
Subject: [PATCH] feat: add dropdown menu for filter

---
 .../ManagementTable/ManagementTable.tsx       | 56 ++++++++++---------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
index 83d15f74..bdedf756 100644
--- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
+++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
@@ -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 { useState } from 'react'
 import { YStack, XStack, Stack } from 'tamagui'
@@ -69,30 +69,36 @@ const ManagementTable = () => {
     <YStack>
       <XStack space={'$3'} justifyContent="space-between" alignItems="center">
         <SearchManagement searchValue={searchValue} changeSearchValue={changeSearchValue} />
-        <Stack style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
-          <SortIcon
-            size={20}
-            color="#647084"
-            style={{
-              border: '1px solid #DCE0E5',
-              borderRadius: '10px',
-              padding: '8px',
-              cursor: 'pointer',
-            }}
-          />
-          <Stack
-            style={{
-              position: 'absolute',
-              right: -2,
-              top: -1.5,
-              width: '9px',
-              height: '9px',
-              borderRadius: '50%',
-              backgroundColor: '#1992D7',
-              border: '1.5px solid #fff',
-            }}
-          />
-        </Stack>
+        <DropdownMenu>
+          <Stack style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+            <SortIcon
+              size={20}
+              color="#647084"
+              style={{
+                border: '1px solid #DCE0E5',
+                borderRadius: '10px',
+                padding: '8px',
+                cursor: 'pointer',
+              }}
+            />
+            <Stack
+              style={{
+                position: 'absolute',
+                right: -2,
+                top: -1.5,
+                width: '9px',
+                height: '9px',
+                borderRadius: '50%',
+                backgroundColor: '#1992D7',
+                border: '1.5px solid #fff',
+              }}
+            />
+          </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>
       <table>
         <thead>