@grandlinex/react-components
Version:
73 lines (72 loc) • 4.77 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HCard = HCard;
const react_1 = __importDefault(require("react"));
const react_icons_1 = require("@grandlinex/react-icons");
const util_1 = require("../../util");
const Grid_1 = require("../Grid/Grid");
const IconButton_1 = require("../button/IconButton");
function HCard({ className, children, imgUrl, icon, title, color, order, hoverButton, imgBase, iconCover, date, imageWidth, skeleton, }) {
const style = order ? { order } : undefined;
let url = null;
if (imgUrl) {
url = imgUrl;
}
else if (imgBase) {
url = `${imgBase}`;
}
return (react_1.default.createElement("div", { style: style, className: (0, util_1.cnx)(className, 'glx-hcard--item') },
react_1.default.createElement("div", { className: "glx-hcard--head", style: {
minWidth: imageWidth ?? '120px',
} },
url ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "glx-hcard--img glx-hround-top", style: { backgroundImage: `url(${url})` } }),
react_1.default.createElement("div", { className: "glx-hcard--space" }))) : null,
!url && iconCover && icon ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "glx-hcard--iconCover glx-hround-top", style: {
backgroundColor: color || 'blue',
} },
react_1.default.createElement(Grid_1.Grid, { flex: true, center: true, className: "glx-hcard--effect glx-hround-top" }, typeof icon === 'string'
? (0, react_icons_1.getIcon)(icon)({ width: 96, height: 96 })
: icon)),
react_1.default.createElement("div", { className: "glx-hcard--space" }))) : null,
skeleton ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "glx-hcard--skeleton glx-hround-top" },
react_1.default.createElement("div", { className: "glx-hcard--effect glx-hround-top" },
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-h-full glx-hround-top" }))),
react_1.default.createElement("div", { className: "glx-hcard--space" }))) : null),
react_1.default.createElement(Grid_1.Grid, { flex: true, flexC: true, grow: 1, flexSpaceB: true, className: "glx-py-8" },
react_1.default.createElement("div", { className: "glx-hcard--title" },
title,
' ',
date ? react_1.default.createElement("span", { className: "glx-hcard--date" }, date) : null,
skeleton ? (react_1.default.createElement("div", { className: "animated-background glx-w-full glx-mt-4", style: {
height: '8px',
width: 'calc( 100% - 60px )',
borderRadius: '4px',
} })) : null),
react_1.default.createElement("div", { className: "glx-hcard--content" },
children,
skeleton ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-mt-4 glx-mt-8", style: {
height: '8px',
width: 'calc( 100% - 20px )',
borderRadius: '4px',
} }),
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-mt-8", style: {
height: '8px',
width: 'calc( 100% - 20px )',
borderRadius: '4px',
} }),
react_1.default.createElement("div", { className: "animated-background glx-w-full glx-mt-8", style: {
height: '8px',
width: 'calc( 100% - 20px )',
borderRadius: '4px',
} }))) : null),
react_1.default.createElement(Grid_1.Grid, { flex: true, flexR: true, hCenter: true }, hoverButton?.map((el) => (react_1.default.createElement(IconButton_1.IconButton, { key: el.key, onClick: el.onClick, toolTip: el.tooltip }, typeof el.icon === 'string'
? (0, react_icons_1.getIcon)(el.icon)({})
: el.icon)))))));
}