From 321598a0e1e2b7749bf2bfea5799a9d6778a08bc Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 20 Nov 2023 18:22:00 +0200
Subject: [PATCH] feat: separate dropdown filter

---
 .../ManagementTable/DropdownFilter.tsx        | 37 ++++++++++++++++++
 .../ManagementTable/ManagementTable.tsx       | 38 +++----------------
 2 files changed, 42 insertions(+), 33 deletions(-)
 create mode 100644 src/pages/ValidatorManagement/ManagementTable/DropdownFilter.tsx

diff --git a/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.tsx b/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.tsx
new file mode 100644
index 00000000..1742cb53
--- /dev/null
+++ b/src/pages/ValidatorManagement/ManagementTable/DropdownFilter.tsx
@@ -0,0 +1,37 @@
+import { DropdownMenu } from '@status-im/components'
+import { SortIcon } from '@status-im/icons'
+import { Stack } from 'tamagui'
+
+const DropdownFilter = () => {
+  return (
+    <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>
+  )
+}
+
+export default DropdownFilter
diff --git a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
index abfe2ac9..57770669 100644
--- a/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
+++ b/src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
@@ -1,10 +1,11 @@
-import { Checkbox, DropdownMenu, Text } from '@status-im/components'
-import { OptionsIcon, SortIcon } from '@status-im/icons'
+import { Checkbox, Text } from '@status-im/components'
+import { OptionsIcon } from '@status-im/icons'
 import { useEffect, useMemo, useState } from 'react'
-import { YStack, XStack, Stack } from 'tamagui'
+import { YStack, XStack } from 'tamagui'
 
 import ValidatorProfile from '../../../components/General/ValidatorProfile'
 import SearchManagement from './SearchManagement'
+import DropdownFilter from './DropdownFilter'
 import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants'
 import './ManagementTable.css'
 
@@ -63,36 +64,7 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl
     <YStack>
       <XStack space={'$3'} justifyContent="space-between" alignItems="center">
         <SearchManagement searchValue={searchValue} changeSearchValue={changeSearchValue} />
-        <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>
+        <DropdownFilter />
       </XStack>
       <table>
         <thead>