Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { styled } from '@mui/material';

const EmojisContainer = styled('div')(({ theme }) => ({
  display: 'flex',
  gap: theme.spacing(0.5),
  justifyContent: 'center',
  padding: theme.spacing(0.5, 0)
}));

const Emoji = styled('button')(({ theme }) => ({
  width: 20,
  height: 20,
  borderRadius: '50%',
  transition: 'all 300ms',
  '& > img': {
    height: '100%',
    objectFit: 'cover',
    width: '100%'
  },
  '&:hover': {
    transform: 'translateY(-5px)'
  },
  [theme.breakpoints.up('sm')]: {
    width: 32,
    height: 32
  }
}));

export default function EmojiGroup({ children }) {
  return <EmojisContainer>{children}</EmojisContainer>;
}

function EmojiItem({ onClick, image, index = 1 }) {
  return (
    <Emoji onClick={onClick} type='button'>
      <img className='fadedown' src={image} style={{ animationDelay: `${index + 10}00ms` }} />
    </Emoji>
  );
}

EmojiGroup.Item = EmojiItem;