Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 11x 11x 13x 5x 5x 1x 4x 13x 5x 5x 13x 2x 11x 11x | import { Avatar, Tooltip } from 'antd'; import React, { useEffect } from 'react'; import styles from './Participants.module.scss'; const colors = ["red", "blue", "green"]; const Participants = ({ username, loggedUser, data }) => { const checkIsParticipant = () => { let findUser = data?.find((user) => user.username === loggedUser) if (findUser) { return true } return false } useEffect(() => { if (username) { if (checkIsParticipant()) { // return } else { // api logic insert } } }, [username]) return ( <div className={styles.Participants}> <> <Avatar.Group maxCount={3} key={username} size="medium" maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf', }} > {data?.map((user) => { return ( <Tooltip title={user.username} placement="top" key={user.username}> <Avatar style={{ backgroundColor: colors[Math.floor(Math.random() * 3)], }} > {user?.username?.charAt(0)} </Avatar> </Tooltip> ) })} </Avatar.Group> </> </div> ) }; Participants.propTypes = {}; Participants.defaultProps = {}; export default Participants; |