12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import { makeStyles } from '@material-ui/core'
- import { useSelector } from 'react-redux';
- import { Carousel } from 'react-responsive-carousel';
- import { firstLetter,slicedWord,timeStampEU,prodBaseURL } from '../../../../../../helpers'
- import { getChat } from '../../../../../../redux/chat/selector'
- const useStyles = makeStyles({
- container: {
- position: 'relative',
- },
- nameTile: {
- position:'absolute',
- color: '#ffffff',
- backgroundColor: 'rgb(0,0,0)',
- borderRadius: 10,
- padding:8,
- fontSize: 18,
- zIndex:10,
- top: '6%',
- left: '50%',
- marginLeft: '-45%',
- opacity: 0.7,
- transition: 'opacity .35s ease-in-out'
- },
- timeTile: {
- position:'absolute',
- color: '#ffffff',
- backgroundColor: 'rgb(0,0,0)',
- borderRadius: 10,
- padding:4,
- fontSize: 15,
- top: '1%',
- left: '50%',
- marginLeft: '-45%',
- opacity: 0.7,
- transition: 'opacity .35s ease-in-out'
- },
- })
- const ProfilePicture = () => {
- const classes = useStyles()
- const { name, lastName, online, avatarsArr} = useSelector(getChat)
- return (
- <div className={classes.container}>
- <Carousel>
- {avatarsArr.map(({avatarUrl,updatedAt}) => <div>
- <img alt='pic' src={`${prodBaseURL}/${avatarUrl}`}/>
- <p className="legend">{timeStampEU(updatedAt)}</p>
- </div>)}
- </Carousel>
- <span className={classes.nameTile}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
- ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
- <span className={classes.timeTile}>{online === 'true'?'online':`last seen ${timeStampEU(online)}`}</span>
- </div>
- )
- }
- export default ProfilePicture
|