pawol.nu/components/teks/vwe-koute-achte.js

import {useState} from 'react'
import PropTypes from 'prop-types'
import {
  Youtube,
  Dailymotion,
  Youtubemusic,
  Applemusic,
  Tidal,
  Spotify,
  Deezer,
  Amazon,
  Soundcloud
} from '@icons-pack/react-simple-icons'
import PlayArrowIcon from '@material-ui/icons/PlayArrow'
import MusicNoteIcon from '@material-ui/icons/MusicNote'
import AlbumIcon from '@material-ui/icons/Album'
import {makeStyles} from '@material-ui/core/styles'
import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@material-ui/lab'

const useStyles = makeStyles(() => ({
  root: {
    height: 0,
    transform: 'translateZ(0px)'
  }
}))

const kouteyAchteyIcons = {
  Qobuz: <AlbumIcon />,
  Deezer: <Deezer />,
  Spotify: <Spotify />,
  Tidal: <Tidal />,
  Amazon: <Amazon />,
  Applemusic: <Applemusic />,
  Youtubemusic: <Youtubemusic />
}

const vweyIcons = {
  Youtube: <Youtube />,
  Dailymotion: <Dailymotion />,
  Soundcloud: <Soundcloud />
}

export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
  const classes = useStyles()
  const [ouve, meteOuve] = useState(false)
  const {kouteyAchtey, lyen} = anTeks

  const kouteyAchteyActions = kouteyAchtey.map(({boutik, url}) => {
    return {
      icon: kouteyAchteyIcons[boutik],
      name: boutik,
      link: url
    }
  })

  const vweyActions = lyen.map(({url, sit}) => {
    return {
      icon: vweyIcons[sit],
      name: sit,
      link: url
    }
  })

  const handleOpen = () => {
    meteOuve(true)
  }

  const handleClick = link => {
    window.location = link
  }

  const handleClose = () => {
    meteOuve(false)
  }

  return (
    <div className={classes.root}>
      <SpeedDial
        color='secondary'
        FabProps={{size: 'small', margin: 'auto', color: 'default'}}
        ariaLabel='SpeedDial openIcon example'
        className={classes.speedDial}
        direction='down'
        icon={<SpeedDialIcon icon={niOdyo ? <MusicNoteIcon /> : <PlayArrowIcon />} />}
        open={ouve}
        onClose={handleClose}
        onOpen={handleOpen}
      >
        {niOdyo && kouteyAchteyActions.map(action => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            onClick={() => handleClick(action.link)}
          />
        ))}
        {niVideyo && vweyActions.map(action => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            onClick={() => handleClick(action.link)}
          />
        ))}
      </SpeedDial>
    </div>
  )
}

VweKouteAchte.propTypes = {
  anTeks: PropTypes.object.isRequired,
  niVideyo: PropTypes.bool,
  niOdyo: PropTypes.bool
}

VweKouteAchte.defaultProps = {
  niVideyo: false,
  niOdyo: false
}