From bf12cc552fec9d22b18d652b7f6d01f07e307ca8 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 8 Nov 2023 00:05:40 +0200
Subject: [PATCH] feat: create management tabs

---
 .../ValidatorManagement/ManagementTabs.tsx    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/pages/ValidatorManagement/ManagementTabs.tsx

diff --git a/src/pages/ValidatorManagement/ManagementTabs.tsx b/src/pages/ValidatorManagement/ManagementTabs.tsx
new file mode 100644
index 00000000..5aeb2177
--- /dev/null
+++ b/src/pages/ValidatorManagement/ManagementTabs.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import { Tabs } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+import ManagementTable from './ManagementTable/ManagementTable'
+
+const ManagementTabs = () => {
+  const VALIDATOR_TABS = useMemo(
+    () => [
+      {
+        label: 'Active',
+        value: 'active',
+      },
+    ],
+    [],
+  )
+
+  return (
+    <Tabs defaultValue="active">
+      <Stack style={{ cursor: 'pointer', width: 'fit-content' }}>
+        <Tabs.List size={32}>
+          {VALIDATOR_TABS.map(tab => (
+            <Tabs.Trigger key={tab.value} type="default" value={tab.value}>
+              {tab.label}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+      </Stack>
+      {VALIDATOR_TABS.map(tab => (
+        <Tabs.Content key={tab.value} value={tab.value} style={{ marginTop: '8px' }}>
+          <ManagementTable />
+        </Tabs.Content>
+      ))}
+    </Tabs>
+  )
+}
+
+export default ManagementTabs