Replacing buttons for dropdown buttons

Author: afposchenrieder

examples/explorer/src/components/Search/SearchBar/SearchBar.jsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { navigate } from '@reach/router';
 import Jumbotron from 'react-bootstrap/Jumbotron';
 import Form from 'react-bootstrap/Form';
-import ButtonGroup from 'react-bootstrap/ButtonGroup';
-import Button from 'react-bootstrap/Button';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+import Dropdown from 'react-bootstrap/Dropdown';
 
 import './searchBar.scss';
 import { isBlockNumber } from '../../../helpers/blockHelper';
@@ -47,20 +47,20 @@ const Search = () => {
             onChange={event => setSearchValue(event.target.value)}
             placeholder="Search by block hash, chain length and transaction hash..."
           />
-          <ButtonGroup>
-            <Button variant="primary" onClick={() => onEpochSearchClick(searchValue)}>
+          <DropdownButton id="dropdown-basic-button" title="Search">
+            <Dropdown.Item variant="primary" onClick={() => onEpochSearchClick(searchValue)}>
               Epoch
-            </Button>
-            <Button variant="primary" onClick={() => onBlockSearchClick(searchValue)}>
+            </Dropdown.Item>
+            <Dropdown.Item variant="primary" onClick={() => onBlockSearchClick(searchValue)}>
               Block
-            </Button>
-            <Button variant="primary" onClick={() => onTxSearchClick(searchValue)}>
+            </Dropdown.Item>
+            <Dropdown.Item variant="primary" onClick={() => onTxSearchClick(searchValue)}>
               Transaction
-            </Button>
-            <Button variant="primary" onClick={() => onAddressSearchClick(searchValue)}>
+            </Dropdown.Item>
+            <Dropdown.Item variant="primary" onClick={() => onAddressSearchClick(searchValue)}>
               Address
-            </Button>
-          </ButtonGroup>
+            </Dropdown.Item>
+          </DropdownButton>
         </div>
       </div>
     </Jumbotron>