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((option, index) => (

        <EmojiItem onClick={() => onSelect(option)} key={option.id}>

          <img

            className='fadedown'

            src={option.image}

            style={{ animationDelay: `${index + 10}00ms` }}

          />

        </EmojiItem>

      ))}

    </EmojisList>

  )

}