Source: components/TranslatorRateTranslationCard.js

import React from 'react';
import parse from "html-react-parser";
import DOMPurify from 'dompurify';

/**
 * card for listing translations to rate
 * @param props props
 */
const TranslatorRateTranslationCard = (props) => {
    let cardStyle = "card mb-4"
    if(props.isOfficial) {
        cardStyle += " bg-warning";
    }

    let btnClass = "btn btn-primary";
    if(!props.liked) {
        btnClass = "btn btn-secondary";
    }

    return (
        <div className={cardStyle}>
            <div className="card-body">
                <div className="row">
                    <div className="col-md-2">
                        <h5>
                            {props.authorUsername}
                        </h5>
                        <p>{props.createdAt}</p>
                        {
                            props.isOfficial &&
                            <span className="font-weight-bold">official</span>
                        }
                    </div>

                    <div className="col-md-8">
                        <div className="bg-light border rounded p-2">
                            {parse(DOMPurify.sanitize(props.translatedText))}
                        </div>
                    </div>

                    <div className="col-md-2">
                        <div className="d-flex justify-content-between mt-md-0 mt-3">
                            <div className="text-info mt-1">
                                <i className="fa fa-thumbs-up" /> {props.likesCount + "x"}
                            </div>

                            <button onClick={() => props.onLikeChange(props.translationId)} type="button" className={btnClass}>
                                {
                                    props.liked ?
                                        <i className="fa fa-thumbs-up" />
                                        :
                                        <i className="fa fa-thumbs-o-up" />
                                }
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default TranslatorRateTranslationCard;