123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- import { makeStyles } from "@material-ui/core/styles";
- import { timeStampMessage } from '../../../../../../helpers'
- const useStyles = makeStyles({
- container: {
- display: "flex",
- justifyContent: "flex-end",
- width:'auto',
- maxWidth: '80%',
- marginBottom:15
- },
- wrapper: {
- width: 300,
- position:'relative'
- },
- image: {
- borderRadius: 10,
- width: 300,
- maxHeight: 400,
- },
- time: {
- position: "absolute",
- fontSize: ".65em",
- fontWeight:600,
- bottom: 6,
- right: 6,
- color: '#ffffff',
- padding:'1px 4px 1px 4px',
- backgroundColor: 'rgba(0, 0, 0, 0.7)',
- borderRadius: 5,
- },
- });
- interface IMessageRightImage {
- imgUrl:string,
- updatedAt:string,
- color:string
- }
- const MessageRightImage = ({imgUrl,updatedAt,color}:IMessageRightImage) => {
- const classes = useStyles();
- return (
- <div className={classes.container}>
- <div className={classes.wrapper}>
- <img className={classes.image} alt='message pic' src={`http://localhost:3000/${imgUrl}`}
- style={{ backgroundColor: imgUrl?'':color }} width='300' height='400' />
- <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
- </div>
- </div>
- )};
- export default MessageRightImage
|