Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3388 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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