FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/ChatBar/Messages/MessagesRight/index.tsx

import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from '@mui/material/ListItemText';
import { firstLetter, slicedWord, timeStamp } from '../../../../../../helpers'

const useStyles = makeStyles({
    container: {
      display: "flex",
      justifyContent: "flex-end",
      width:'auto',
      maxWidth: '80%',
    },
    messageVertical: {
      position:'relative',
      display: 'flex',
      alignContent: 'center',
      alignItems: 'flex-end',
      marginBottom: "10px",
    },
    message: {
      position: "relative",
      marginRight: 5,
      padding: "10px",
      paddingBottom:18,
      backgroundColor: "#deffa9",
      wordBreak:'break-word',
      textAlign: "left",
      font: "400 .9em 'Open Sans', sans-serif",
      border: "1px solid #d5ff91",
      borderRadius: "10px",
      "&:after": {
        content: "''",
        position: "absolute",
        width: "0",
        height: "0",
        borderBottom: "15px solid #deffa9",
        borderLeft: "15px solid transparent",
        borderRight: "15px solid transparent",
        bottom: "0",
        right: "-15px"
      },
      "&:before": {
        content: "''",
        position: "absolute",
        width: "0",
        height: "0",
        borderBottom: "17px solid #deffa9",
        borderLeft: "16px solid transparent",
        borderRight: "16px solid transparent",
        bottom: "-1px",
        right: "-17px"
      }
    },
    messageTime: {
      position: "absolute",
      fontSize: ".65em",
      fontWeight:600,
      marginTop: "10px",
      bottom: "12px",
      left: 10,
      color: '#4d4c4c',
    },
});

interface IMessageRight {
  message:string,
  avatarUrl:string,
  name:string,
  lastName:string,
  updatedAt:string,
  color:string
}

const MessageRight = ({message,avatarUrl,name,lastName,updatedAt,color}:IMessageRight) => {
  const classes = useStyles();

  return (
  <div className={classes.container}>
      <div className={classes.messageVertical}>
        <ListItemText className={classes.message}
          primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
          primaryTypographyProps={{color: "#42aee0"}}
          secondary={message}
          secondaryTypographyProps={{ color: "#0e0d0d" }} />
        <div className={classes.messageTime}>{timeStamp(updatedAt)}</div>
       <Avatar
          alt='avatar'
          src={avatarUrl ? `http://localhost:3000/${avatarUrl}` : undefined}
          style={{ background: color, width: 40, height: 40, marginBottom: 13 }}>
          {!avatarUrl && `${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
      </div>
  </div>    
)};



export  default  MessageRight