123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- import { makeStyles } from "@material-ui/core/styles";
- import ListItemText from '@mui/material/ListItemText';
- import { CopyToClipboard } from 'react-copy-to-clipboard';
- import { firstLetter, slicedWord, timeStampMessage,copied } from '../../../../../../helpers'
- const useStyles = makeStyles({
- container: {
- display: "flex",
- justifyContent: "flex-end",
- width:'auto',
- maxWidth: '80%',
- marginBottom:10
- },
- wrapper: {
- position: 'relative',
- maxWidth: 450
- },
- 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: 7,
- "&: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"
- }
- },
- time: {
- position: "absolute",
- fontSize: ".65em",
- fontWeight:600,
- bottom: 6,
- right: 6,
- color: '#414141',
- padding: 3,
- borderRadius: 5,
- },
- });
- interface IMessageRightText {
- message:string,
- name:string,
- lastName:string,
- updatedAt:string,
- }
- const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) => {
- const classes = useStyles();
- return (
- <div className={classes.container}>
- <CopyToClipboard onCopy={() => copied()} text={message}>
- <div className={classes.wrapper}>
- <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.time}>{timeStampMessage(updatedAt)}</div>
- </div>
- </CopyToClipboard>
- </div>
- )};
- export default MessageRightText
|