Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3348 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3330 stevensc 1 
import React from 'react'
2 
import { styled } from '@mui/material'
3 
 
3338 stevensc 4 
const EmojisContainer = styled('div')(({ theme }) => ({
3330 stevensc 5 
  display: 'flex',
6 
  gap: theme.spacing(0.5),
7 
  justifyContent: 'center',
8 
  padding: theme.spacing(0.5, 0)
9 
}))
10 
 
3388 stevensc 11 
const Emoji = styled('button')(({ theme }) => ({
12 
  width: 20,
13 
  height: 20,
14 
  borderRadius: '50%',
15 
  transition: 'all 300ms',
16 
  '& > img': {
17 
    height: '100%',
18 
    objectFit: 'cover',
19 
    width: '100%'
20 
  },
21 
  '&:hover': {
22 
    transform: 'translateY(-5px)'
23 
  },
24 
  [theme.breakpoints.up('sm')]: {
25 
    width: 32,
26 
    height: 32
3330 stevensc 27 
  }
3388 stevensc 28 
}))
3330 stevensc 29 
 
3338 stevensc 30 
export default function EmojiGroup({ children }) {
31 
  return <EmojisContainer>{children}</EmojisContainer>
32 
}
33 
 
34 
function EmojiItem({ onClick, image, index = 1 }) {
3330 stevensc 35 
  return (
3348 stevensc 36 
    <Emoji onClick={onClick} type='button'>
3338 stevensc 37 
      <img
38 
        className='fadedown'
39 
        src={image}
40 
        style={{ animationDelay: `${index + 10}00ms` }}
41 
      />
42 
    </Emoji>
3330 stevensc 43 
  )
44 
}
3338 stevensc 45 
 
46 
EmojiGroup.Item = EmojiItem