text: import React, { useState, useEffect } from 'react'
  import * as S from './styled'
  
  import { Home } from 'styled-icons/boxicons-solid/Home'
  import { SearchAlt2 as Search } from 'styled-icons/boxicons-regular/SearchAlt2'
  import { UpArrowAlt as Arrow } from 'styled-icons/boxicons-regular/UpArrowAlt'
  import { LightbulbOutline as Light } from 'styled-icons/material/LightbulbOutline'
  import { Grid } from 'styled-icons/boxicons-solid/Grid'
  import { FormatListBulleted as List } from 'styled-icons/material/FormatListBulleted'
  
  const MenuBar = () => {
    const [theme, setTheme] = useState(null)
    const [display, setDisplay] = useState(null)
    const isDarkMode = theme === 'dark'
    const isDisplayList = display === 'list'
  
    useEffect(() => {
      setTheme(window.__theme)
      window.__onThemeChange = () => setTheme(window.__theme)
      setDisplay(window.__display)
      window.__onDisplayChange = () => setDisplay(window.__display)
    }, [])
    return (
      <S.MenuBarWrapper>
        <S.MenuBarGroup>
          <S.MenuBarLink to="/" title="Voltar para Home">
            <S.MenuBarItem>
              <Home />
            </S.MenuBarItem>
          </S.MenuBarLink>
          <S.MenuBarLink to="/search/" title="Pesquisar">
            <S.MenuBarItem>
              <Search />
            </S.MenuBarItem>
          </S.MenuBarLink>
        </S.MenuBarGroup>
        <S.MenuBarGroup>
          <S.MenuBarItem
            title="Mudar o tema"
            onClick={() => {
              window.__setPreferredTheme(isDarkMode ? 'light' : 'dark')
            }}
            className={theme}
          >
            <Light />
          </S.MenuBarItem>
          <S.MenuBarItem
            className="on-switch-display"
            title="Mudar visualização"
            onClick={() => {
              window.__setPreferredDisplay(isDisplayList ? 'grid' : 'list')
            }}
          >
            {isDisplayList ? <Grid /> : <List />}
          </S.MenuBarItem>
          <S.MenuBarItem title="Ir para o Topo">
            <Arrow />
          </S.MenuBarItem>
        </S.MenuBarGroup>
      </S.MenuBarWrapper>
    )
  }
  
  export default MenuBar
  