Source: components/MyTranslationCard.js

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

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

    return (
        <div className={cardStyle}>
            <div className="card-body">
                <div className="row">
                    <div className="col-md-2">
                        <h4>
                            {props.order + "."}
                        </h4>
                        <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 mt-md-0 mt-2">
                        <div className="d-flex justify-content-between">
                            <div className="text-info mt-1">
                                <i className="fa fa-thumbs-up" /> {props.likesCount + "x"}
                            </div>
                        </div>
                        {
                            props.index !== 0 &&
                            <ButtonWithProgress  onClick={() => props.onRollback(props.translationId, props.index)}
                                                 className="btn btn-danger w-100 mt-3 mb-2"
                                                 disabled={props.pendingApiCall}
                                                 pendingApiCall={props.pendingApiCall}
                                                 hasChildren>
                                <i className="fa fa-times" /> Rollback
                            </ButtonWithProgress>
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default MyTranslationCard;