new react block

web/modules/custom/ufc/js/src/components/Button.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
 function Button(props) {
-  return <button className="btn btn-primary"><a href={props.link}>View Fight</a></button>;
+  return <button className={"btn btn-" + props.classes}><a href={props.link}>View Fight</a></button>;
 }
 
 export default Button;

web/modules/custom/ufc/js/src/components/FightCard.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { useState, useEffect } from 'react';
 import Button from './Button';
+import Image from './Image';
 
 const FightCard = () => {
   const [fights, setFights] = useState([]);
@@ -10,7 +11,6 @@ const FightCard = () => {
         return res.json();
       })
       .then((data) => {
-        console.log(data);
         setFights(data);
       });
   }, []);
@@ -18,10 +18,17 @@ const FightCard = () => {
     <div className="d-flex flex-row flex-wrap">
       {fights.map((fight, index) => (
         <div key={index} className="card col-md-3">
+          <div className="card-header">
+            <Image alt="headshot for ufc fighter" uri={fight.fighter_one_image} />
+            <span id="versus">vs.</span>
+            <Image alt="headshot for ufc fighter" uri={fight.fighter_two_image} />
+          </div>
           <div className="card-body">
             <h4>{fight.fighter_one}</h4>
             <h4>{fight.fighter_two}</h4>
-            <Button link={fight.url} />
+          </div>
+          <div className="card-footer">
+            <Button link={fight.url} classes="primary" />
           </div>
         </div>
       ))}

web/modules/custom/ufc/js/src/components/Image.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+function Image(props) {
+  return (
+    <img src={props.uri} className="img-fluid fightcard-img" alt={props.alt} />
+  );
+}
+
+export default Image;