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

import { makeStyles } from "@material-ui/core/styles";

import { timeStamp } from '../../../../../../helpers'

const useStyles = makeStyles({
    container: {
      display: "flex",
      justifyContent: "flex-start",
      width:'auto',
      maxWidth: '80%',
      marginBottom:15
  },
  imageWrapper: {
    width: 300,
    position:'relative'
  },
    image: {
      borderRadius: 10,
      width: 300,
      maxHeight: 400,
    },  
    time: {
      position: "absolute",
      fontSize: ".65em",
      fontWeight:600,
      bottom: -4,
      right: -4,
      color: '#ffffff',
      backgroundColor: '#3a3a3a',
      padding: 3,
      borderRadius:5
    },
});

interface IMessagesLeftImage {
  imgUrl:string,
  updatedAt:string,
  color:string
}

const MessagesLeftImage = ({imgUrl,updatedAt,color}:IMessagesLeftImage) => {
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <div className={classes.imageWrapper}>
        <img className={classes.image} alt='message pic' src={`http://localhost:3000/${imgUrl}`}
        style={{ backgroundColor: imgUrl?'':color }} width='300' height='400' />
        <div className={classes.time}>{timeStamp(updatedAt)}</div>
      </div>
    </div>    
)};

export  default  MessagesLeftImage