@cross-nft-marketplace/auction-house-nft-components
Version:
NFT Media Rendering Components
35 lines (34 loc) • 2.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NFTProperties = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_2 = require("react");
const useMediaContext_1 = require("../context/useMediaContext");
const NFTDataContext_1 = require("../context/NFTDataContext");
const InfoContainer_1 = require("./InfoContainer");
const NFTProperties = ({ className }) => {
const { nft } = (0, react_2.useContext)(NFTDataContext_1.NFTDataContext);
const { getStyles } = (0, useMediaContext_1.useMediaContext)();
const renderAttributes = (attributes) => {
attributes = attributes.filter(attr => attr.type != "tag");
if (!attributes || attributes.length == 0) { //todo possible add length check also
return null;
}
return ((0, jsx_runtime_1.jsx)(InfoContainer_1.InfoContainer, { className: className, titleString: "PROPERTIES_TITLE", children: (0, jsx_runtime_1.jsx)("div", { ...getStyles("propertiesGrid"), children: attributes.map((attribute, index) => {
return ((0, react_1.createElement)("div", { ...getStyles("propertiesItem"), key: `${nft.contractNftId}${index}` },
(attribute === null || attribute === void 0 ? void 0 : attribute.type) && ((0, jsx_runtime_1.jsx)("span", { ...getStyles("propertiesLabel"), children: attribute === null || attribute === void 0 ? void 0 : attribute.type })),
(attribute === null || attribute === void 0 ? void 0 : attribute.value) && (0, jsx_runtime_1.jsx)("span", { children: attribute === null || attribute === void 0 ? void 0 : attribute.value })));
}) }) }));
};
const getContent = () => {
if (nft && nft.attributes) {
return renderAttributes(nft.attributes);
}
else {
return (0, jsx_runtime_1.jsx)(react_2.Fragment, {});
}
};
return nft ? getContent() : null;
};
exports.NFTProperties = NFTProperties;