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')`
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 300ms;
  & > img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
  &:hover {
    transform: translateY(-5px);
  }
`

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