Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3332 | Rev 3348 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3332 Rev 3338
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'
Línea 3... Línea 3...
3 
 
 3 
 
4 
const EmojisList = 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)
Línea 9... Línea 9...
9 
}))
 9 
}))
10 
 
 10 
 
11 
const EmojiItem = styled('button')`
 11 
const Emoji = styled('button')`
12 
  width: 32px;
 12 
  width: 32px;
13 
  height: 32px;
 13 
  height: 32px;
14 
  border-radius: 50%;
 14 
  border-radius: 50%;
Línea 21... Línea 21...
21 
  &:hover {
 21 
  &:hover {
22 
    transform: translateY(-5px);
 22 
    transform: translateY(-5px);
23 
  }
 23 
  }
24 
`
 24 
`
Línea 25... Línea 25...
25 
 
 25 
 
- 
 
 26 
export default function EmojiGroup({ children }) {
- 
 
 27 
  return <EmojisContainer>{children}</EmojisContainer>
- 
 
 28 
}
- 
 
 29 
 
26 
export default function EmojiSelector({ options = [], onSelect = () => {} }) {
 30 
function EmojiItem({ onClick, image, index = 1 }) {
27 
  return (
 31 
  return (
28 
    <EmojisList>
 - 
 
29 
      {options.map((option, index) => (
 - 
 
30 
        <EmojiItem onClick={() => onSelect(option)} key={option.id}>
 32 
    <Emoji onClick={onClick}>
31 
          <img
 33 
      <img
32 
            className='fadedown'
 34 
        className='fadedown'
33 
            src={option.image}
 35 
        src={image}
34 
            style={{ animationDelay: `${index + 10}00ms` }}
 - 
 
35 
          />
 - 
 
36 
        </EmojiItem>
 36 
        style={{ animationDelay: `${index + 10}00ms` }}
37 
      ))}
 37 
      />
38 
    </EmojisList>
 38 
    </Emoji>
39 
  )
 39 
  )
- 
 
 40 
}
- 
 
 41