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-of-type)': {
    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>
  );
}