dan/dchadwick
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new react block

Browse Source
This commit is contained in:
Dan Chadwick
2024-04-10 15:00:10 -07:00
parent 69f2a14f9b
commit 5e16d7687e
9 changed files with 221 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/modules/custom/ufc/js/dist/main.min.js vendored
View File

@@ -17,7 +17,7 @@ __webpack_require__.r(__webpack_exports__);
function Button(props) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "btn btn-primary"
className: "btn btn-" + props.classes
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
href: props.link
}, "View Fight"));
@@ -39,6 +39,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button */ "./js/src/components/Button.js");
/* harmony import */ var _Image__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Image */ "./js/src/components/Image.js");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -48,6 +49,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var FightCard = function FightCard() {
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
_useState2 = _slicedToArray(_useState, 2),
@@ -57,7 +59,6 @@ var FightCard = function FightCard() {
fetch('/api/v1/recent-fights').then(function (res) {
return res.json();
}).then(function (data) {
console.log(data);
setFights(data);
});
}, []);
@@ -68,9 +69,22 @@ var FightCard = function FightCard() {
key: index,
className: "card col-md-3"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "card-header"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
alt: "headshot for ufc fighter",
uri: fight.fighter_one_image
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
id: "versus"
}, "vs."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
alt: "headshot for ufc fighter",
uri: fight.fighter_two_image
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "card-body"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_one), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_two), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__["default"], {
link: fight.url
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_one), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_two)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "card-footer"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__["default"], {
link: fight.url,
classes: "primary"
})));
}));
};
@@ -78,6 +92,30 @@ var FightCard = function FightCard() {
/***/ }),
/***/ "./js/src/components/Image.js":
/*!************************************!*\
!*** ./js/src/components/Image.js ***!
\************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
function Image(props) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
src: props.uri,
className: "img-fluid fightcard-img",
alt: props.alt
});
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Image);
/***/ }),
/***/ "./node_modules/react-dom/cjs/react-dom.development.js":
/*!*************************************************************!*\
!*** ./node_modules/react-dom/cjs/react-dom.development.js ***!

2
web/modules/custom/ufc/js/dist/main.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
web/modules/custom/ufc/js/src/components/Button.js
View File

@@ -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;

11
web/modules/custom/ufc/js/src/components/FightCard.js
View File

@@ -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>
))}

9
web/modules/custom/ufc/js/src/components/Image.js Normal file
View File

@@ -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;