Flesh out ResultRow with info

[GregStephen]

User Story

As a user when I search something, the result will show up in neat little cards

AC

WHEN the search bar is pressed THEN 10 cards will show up with an image on the left, name up top, address below that, IF the business has unisex bathrooms THEN include a yellow star rating AND whether or not it has changing tables in them IF the business has a male bathroom THEN include a blue star rating AND whether or not it has changing table IF the business has a female bathroom THEN include a pink star rating AND whether or not it has a changing table

Development

• In Home.js change the <ul> to a <div className="row"> and give the parent div class "container"
• In ResultRow.js change the <li> to a bootstrap card.
• Use the example div in comments to shape the resultRow

[GregStephen]

<div className="ResultRow col-12 mb-2">
        <div className="card">
          <div className="row no-gutters">
            <div className="col-md-4">
              <img className="result-image img-fluid" src={result.image_url} alt="A picture of {result.name}"></img>
            </div>
            <div className="col-md-8">
              <div className="card-body">
                <h2 className="card-title">{result.name}</h2>
                <p>{result.address}</p>
                { showRatings }
              </div>
            </div>
          </div>
        </div>
      </div>