Proyectos de Subversion LeadersLinked - Backend

import React from "react";
import parse from "html-react-parser";

import styles from "./messages.module.scss";

const Message = ({ message }) => {
  const { m, mtype, time, u, user_name } = message;

  const messageContent = {
    text: <p>{parse(emojione.shortnameToImage(m))}</p>,
    image: (
      <div className="d-flex align-item-center">
        <img className={styles.chatImg} src={m} alt="chat_img" />
        <a href={m} target="_blank" className={styles.downloadBtn}>
          <i className="fa ti-arrow-circle-down"></i>
        </a>
      </div>
    ),
    video: (
      <div className="d-flex align-item-center">
        <video className={styles.chatImg} src={m} preload="none" controls />
        <a href={m} target="_blank" className={styles.downloadBtn}>
          <i className="fa ti-arrow-circle-down"></i>
        </a>
      </div>
    ),
    document: (
      <div className="d-flex align-item-center">
        <img
          className={styles.pdfImage}
          src="/storage/type/default/filename/pdf.png"
          alt="pdf"
        />
        <a href={m} target="_blank" className={styles.downloadBtn}>
          <i className="fa ti-arrow-circle-down"></i>
        </a>
      </div>
    ),
  };

  return (
    <>
      {u !== 1 && <span className={styles.userName}>{user_name}</span>}
      <div
        className={`${styles.message} ${
          message.u === 1 ? styles.message_sent : styles.message_received
        }`}
      >
        <div className={styles.messageContainer}>
          {messageContent[mtype]}
          <span>{time}</span>
        </div>
      </div>
    </>
  );
};

export default Message;