const Audio = ({ svgClass }) => <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' className={svgClass} viewBox='0 -1 8 8' style={{ fill: 'inherit' }}><path d='M1.16 0c-.72.72-1.16 1.71-1.16 2.81s.43 2.12 1.16 2.84l.72-.72c-.54-.54-.88-1.29-.88-2.13 0-.83.33-1.55.88-2.09l-.72-.72zm5.69 0l-.72.72c.54.54.88 1.26.88 2.09 0 .83-.33 1.58-.88 2.13l.72.72c.72-.72 1.16-1.74 1.16-2.84 0-1.1-.43-2.09-1.16-2.81zm-4.25 1.41c-.36.36-.59.86-.59 1.41 0 .55.23 1.08.59 1.44l.69-.72c-.18-.18-.28-.44-.28-.72 0-.28.1-.5.28-.69l-.69-.72zm2.81 0l-.69.72c.18.18.28.41.28.69 0 .28-.1.54-.28.72l.69.72c.36-.36.59-.89.59-1.44 0-.55-.23-1.05-.59-1.41z'></path></svg>

const menu = [
  {
    title: 'Section 1',
    links: [
      {
        text: 'Link 1',
        url: '#link-1',
        onClick: e => {
          e.preventDefault();
          console.log('Go Link 1!')
        }
      },
      {
        target: '_blank',
        text: 'Link 2',
        url: '#link-2'
      }
    ]
  },
  {
    title: 'Section 2',
    links: [
      {
        text: 'Link 3',
        url: '#link-3'
      },
      {
        text: 'Link 4',
        url: '#link-4'
      }
    ]
  }
]

return (
  <DropdownBasic
    button={{ icon: Audio, text: 'My dropdown' }}
    menu={menu}
    closeOnItemClick
    closeOnDocumentClick
  />
)
