123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- import { makeStyles } from "@material-ui/core/styles";
- import { timeStamp } from '../../../../../../helpers'
- const useStyles = makeStyles({
- container: {
- display: "flex",
- justifyContent: "flex-end",
- 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 IMessagesRightImage {
- imgUrl:string,
- updatedAt:string,
- color:string
- }
- const MessagesRightImage = ({imgUrl,updatedAt,color}:IMessagesRightImage) => {
- 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 MessagesRightImage
|