Source: components/ApproveExhibitCard.js

import React from 'react';
import {Link} from "react-router-dom";
import {EXHIBITS_IMAGES_URL} from "../shared/sharedConstants";
import Select from "react-select";

/**
 * card for listing exhibits to approve
 * @param props props
 */
const ApproveExhibitCard = (props) => (
    <div className="card mb-4">
        <div className="card-body">
            <div className="row">
                <div className="col-12 col-xl-3">
                    <img className="img-fluid sizedImg img-thumbnail" src={EXHIBITS_IMAGES_URL + props.image} alt="exhibit" />
                </div>

                <div className="col-12 col-md-8 col-xl-6 mt-3 mt-xl-0">
                    <h3 className="card-title">
                        {props.name}
                    </h3>

                    <div className="mb-3 mt-4">
                        <Select options={props.languages.map(lan => {return {value: lan.languageId, label: lan.name};})}
                                onChange={(event) => props.selectLang(props.exhibitId, event.value)} />
                    </div>
                </div>

                <div className="col-12 col-md-4 col-xl-3 mt-3 mt-xl-0">
                    <Link exact to={"/approve/" + props.exhibitId + "/" + props.lang} className={props.buttonDisabled && "disabled-link"}>
                        <button type="button" disabled={props.buttonDisabled} className="btn btn-primary btn-lg w-100">
                            <i className="fa fa-star"/> Approve
                        </button>
                    </Link>
                </div>
            </div>
        </div>
    </div>
)

export default ApproveExhibitCard;