1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- import { makeStyles } from "@material-ui/core/styles";
- import Avatar from "@material-ui/core/Avatar";
- import ListItemText from '@mui/material/ListItemText';
- 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",
- },
- avatar: {
- width: 34,
- height: 34,
- backgroundColor: "#2697dd",
- marginBottom:13
- },
- 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: ".75em",
- fontWeight:300,
- marginTop: "10px",
- bottom: "12px",
- right: "50px",
- zIndex: 3,
- color: '#4d4c4c'
- },
- });
- const firstLetter = (word: string) => word.slice(0, 1).toUpperCase()
- const slicedWord = (word: string, max: number,from:number = 0) => word.length < max ? word.slice(from) : word.slice(from, max)
- const MessageRight = ({message,avatarUrl,name,lastName,timestamp}:any) => {
- const classes = useStyles();
- return (
- <div className={classes.container}>
- <div className={classes.messageVertical}>
- <div className={classes.messageTime}>{timestamp}</div>
- <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"}}/>
- <Avatar
- alt='avatar'
- src={avatarUrl?avatarUrl:undefined}
- className={classes.avatar}
- ></Avatar>
- </div>
- </div>
- )};
- export default MessageRight
|