From 1b467c402217d6753650d3fb1f21a88c64ff0235 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 20 Nov 2023 18:55:33 +0200
Subject: [PATCH] Create dropdown

---
 src/pages/LogsPage/LogsPage.tsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/pages/LogsPage/LogsPage.tsx b/src/pages/LogsPage/LogsPage.tsx
index 09e40e74..17d73c01 100644
--- a/src/pages/LogsPage/LogsPage.tsx
+++ b/src/pages/LogsPage/LogsPage.tsx
@@ -7,13 +7,14 @@ import LogsTerminal from './LogsTerminal'
 import LogsSumCard from './LogsSumCard'
 import SupportCard from './SupportCard'
 import { useEffect, useState } from 'react'
-import { Button, Input } from '@status-im/components'
+import { Button, DropdownMenu, Input } from '@status-im/components'
 import { SearchIcon, DropdownIcon } from '@status-im/icons'
 import SwitchComponent from './SwitchComponent'
+
 const LogsPage = () => {
   const [timestamps, setTimestamps] = useState(false)
   const [windowWidth, setWindowWidth] = useState(window.innerWidth)
-
+  const [dropdownMenuItem, setDropdownMenuItem] = useState('Validator')
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(+window.innerWidth)
@@ -44,10 +45,27 @@ const LogsPage = () => {
           <TitleLogo />
           <XStack space={'$4'}>
             <Input variant="retractable" color={'black'} icon={<SearchIcon size={16} />}></Input>
-
-            <Button variant="outline" icon={<DropdownIcon size={16} />}>
-              Validator
-            </Button>
+            <Stack>
+              <DropdownMenu>
+                <Button variant="outline" icon={<DropdownIcon size={16} />}>
+                  {dropdownMenuItem}
+                </Button>
+                <DropdownMenu.Content>
+                  <DropdownMenu.Item
+                    label="Validator"
+                    onSelect={() => setDropdownMenuItem('Validator')}
+                  />
+                  <DropdownMenu.Item
+                    label="Critical"
+                    onSelect={() => setDropdownMenuItem('Critical')}
+                  />
+                  <DropdownMenu.Item
+                    label="Warnings"
+                    onSelect={() => setDropdownMenuItem('Warnings')}
+                  />
+                </DropdownMenu.Content>
+              </DropdownMenu>
+            </Stack>
             <Button
               variant="outline"
               icon={<SwitchComponent timestamps={timestamps} setTimestamps={setTimestamps} />}