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