Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import styles from '../../mobile-chat/mobile-chat/chat/messages/messages.module.scss'

const MessageTemplate = ({ message }) => {

    const isRightPosition = message.side === "right";

    const messageRenderer = (message) => {
        const { type } = message;

        switch (type) {
            case "text":
                return (
                    <div
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
                        key={message.message}
                    >
                        <div className="messg-usr-img">
                            <a href={message.sender_profile}>
                                <img
                                    src={message.sender_image}
                                    className="cursor-pointer"
                                    alt={message.sender_name}
                                />
                            </a>
                        </div>
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
                            <div className="message-inner-dt">
                                <p className={`w-100 border-none bg-transparent ${'text-' + message.side}`}>{message.message}</p>
                            </div>
                            <span className="p-1">{message.date}</span>
                        </div>
                    </div>
                );
            case "image":
                return (
                    <div
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
                        key={message.message}
                    >
                        <div className="messg-usr-img">
                            <a href={message.sender_profile}>
                                <img
                                    src={message.sender_image}
                                    className="cursor-pointer"
                                    alt={message.sender_name}
                                />
                            </a>
                        </div>
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
                            <div className="message-inner-dt">
                                <img
                                    src={message.filename}
                                    alt={`${message.sender_name} message image`}
                                />
                            </div>
                            <span className="p-1">{message.date}</span>
                        </div>
                    </div>
                );
            case "video":
                return (
                    <div
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
                        key={message.message}
                    >
                        <div className="messg-usr-img">
                            <a href={message.sender_profile}>
                                <img
                                    src={message.sender_image}
                                    className="cursor-pointer"
                                    alt={message.sender_name}
                                />
                            </a>
                        </div>
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
                            <div className="message-inner-dt">
                                <video src={message.filename} />
                            </div>
                            <span className="p-1">{message.date}</span>
                        </div>
                    </div>
                );
            case "document":
                return (
                    <div
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
                        key={message.message}
                    >
                        <div className="messg-usr-img">
                            <a href={message.sender_profile}>
                                <img
                                    src={message.sender_image}
                                    className="cursor-pointer"
                                    alt={message.sender_name}
                                />
                            </a>
                        </div>
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
                            <div className="message-inner-dt">
                                <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>
                            <span className="p-1">{message.date}</span>
                        </div>
                    </div>
                );
            default:
                break;
        }
    };

    return messageRenderer(message)

}
export default MessageTemplate