Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5670 | Rev 5737 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5577 stevensc 1 
import React, { useState } from 'react'
2 
import RecommendIcon from '@mui/icons-material/Recommend'
3 
import FavoriteIcon from '@mui/icons-material/Favorite'
4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
5734 stevensc 5 
import { debounce } from '../../../utils'
5574 stevensc 6 
 
5667 stevensc 7 
export const ReactionButton = () => {
5668 stevensc 8 
  const [settedReaction, setSettedReaction] = useState('r')
5734 stevensc 9 
  const [showReactions, setShowReactions] = useState(false)
5667 stevensc 10 
 
11 
  const reactions = [
12 
    {
13 
      type: 'r',
5668 stevensc 14 
      icon: <RecommendIcon />,
5667 stevensc 15 
    },
16 
    {
17 
      type: 'f',
5668 stevensc 18 
      icon: <FavoriteIcon />,
5667 stevensc 19 
    },
20 
    {
21 
      type: 'v',
5668 stevensc 22 
      icon: <VolunteerActivismIcon />,
5667 stevensc 23 
    },
24 
  ]
25 
 
5734 stevensc 26 
  const onHover = debounce(() => setShowReactions(true), 1000)
27 
 
5577 stevensc 28 
  return (
5734 stevensc 29 
    <button type="button" className="reaction-btn" onMouseEnter={onHover}>
30 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
5669 stevensc 31 
        {reactions.map((reaction) => (
32 
          <button
33 
            key={reaction.type}
5670 stevensc 34 
            onClick={() => setSettedReaction(reaction.type)}
5669 stevensc 35 
          >
36 
            {reaction.icon}
37 
          </button>
38 
        ))}
5577 stevensc 39 
      </div>
5668 stevensc 40 
      {reactions.map((reaction) =>
41 
        reaction.type === settedReaction ? reaction.icon : null
42 
      )}
5577 stevensc 43 
    </button>
44 
  )
45 
}