Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react'
import { styled } from '@mui/material'
import { REACTIONS } from '@constants/feed'

const ReactionsGroup = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  cursor: 'pointer',
  '& > svg:not(:first-child)': {
    marginLeft: theme.spacing(-0.7)
  }
}))

export default function ReactionsIcons({ reactions = [] }) {
  const icons = useMemo(
    () =>
      REACTIONS.filter(({ type }) =>
        reactions.some(({ reaction }) => type === reaction)
      ),
    [reactions]
  )

  return (
    <ReactionsGroup>
      {icons.map(({ icon: Icon, color, label }) => (
        <Icon key={label} style={{ color }} />
      ))}
    </ReactionsGroup>
  )
}