Source: components/MyExhibitCard.js

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

/**
 * card for listing exhibit of user's institution
 * @param props props
 */
const MyExhibitCard = (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>
                        <span className="font-weight-bold">Creation date: </span>
                        {props.createdAt}
                    </div>

                    {
                        props.building &&
                        <div>
                            <span className="font-weight-bold">Building: </span>
                            {props.building.name}
                        </div>
                    }

                    {
                        props.room &&
                        <div>
                            <span className="font-weight-bold">Room: </span>
                            {props.room.name}
                        </div>
                    }

                    {
                        props.showcase &&
                        <div>
                            <span className="font-weight-bold">Show-case: </span>
                            {props.showcase.name}
                        </div>
                    }
                </div>

                <div className="col-12 col-md-4 col-xl-3 mt-3 mt-xl-0">
                    <Link exact to={"/myInstitution/exhibits/" + props.exhibitId} >
                        <button type="button" className="btn btn-info w-100">
                            <i className="fa fa-pencil" /> Detail
                        </button>
                    </Link>
                    <br />

                    <button type="button" className="btn btn-secondary w-100 mt-2" onClick={() => props.onClickDownloadQRCode(props.exhibitId)}>
                        <i className="fa fa-qrcode" /> QR Code
                    </button>
                    <br />

                    <ButtonWithProgress  onClick={() => props.onClickDelete(props.exhibitId)}
                                         className="btn btn-danger w-100 mt-2"
                                         disabled={props.pendingApiCall}
                                         pendingApiCall={props.pendingApiCall}
                                         hasChildren>
                        <i className="fa fa-times" /> Delete
                    </ButtonWithProgress>
                </div>
            </div>
        </div>
    </div>
)

export default MyExhibitCard;