Proyectos de Subversion LeadersLinked - SPA

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

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

const EmojiItem = 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 EmojiSelector({ options = [], onSelect = () => {} }) {
  return (
    <EmojisList>
      {options.map(({ link_save, id, image }, index) => (
        <EmojiItem onClick={() => onSelect(link_save)} key={id}>
          <img
            className='fadedown'
            src={image}
            style={{ animationDelay: `${index + 10}00ms` }}
          />
        </EmojiItem>
      ))}
    </EmojisList>
  )
}