ax3Client/src/pageElements/DetailCard.js

import React from "react";
import "../styles/detailcard.scss";

export const DetailCard = (props) => {
  const { data } = props;

  const {
    caseNumber,
    caption,
    jurisdiction,
    judge,
    venue,
    caseType,
    trialDate,
    filedDate,
    contactFirstName,
    contactLastName,
    contactEmail,
    attorneys,
    parties,
  } = data;

  return (
    <div className="det-card-card-outer">
      <div className="detail-card-row">
        <div className="detail-card-col">
          <div className="detail-card-detail">
            <p className="detail-subhead"> Trial Date:</p>
            <p className="detail-text"> {trialDate}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead"> Date Filed:</p>
            <p className="detail-text"> {filedDate}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead">Lead attorney(s):</p>
            <p className="detail-text">
              {" "}
              {attorneys ? attorneys : "Not listed"}
            </p>
          </div>
        </div>

        <div className="detail-card-col">
          <div className="detail-card-detail">
            <p className="detail-subhead">Jurisdiction:</p>
            <p className="detail-text"> {jurisdiction}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead">Venue:</p>
            <p className="detail-text"> {venue}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead"> Contact:</p>
            <p className="detail-text">
              {contactFirstName}
              &nbsp;
              {contactLastName}
            </p>
          </div>
        </div>

        <div className="detail-card-col">
          <div className="detail-card-detail">
            <p className="detail-subhead">Judge:</p>
            <p className="detail-text"> {judge}</p>
          </div>

          <div className="detail-card-detail">
            <p className="detail-subhead">Case Type:</p>
            <p className="detail-text"> {caseType}</p>
          </div>
          <div className="detail-card-detail">
            <p className="detail-subhead">Contact email:</p>
            <p className="detail-text"> {contactEmail}</p>
          </div>
        </div>
      </div>
    </div>
  );
};