phx-react
Version:
PHX REACT
21 lines • 1.63 kB
JavaScript
;
exports.__esModule = true;
exports.PHXGridLayout = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var useResize_1 = require("./useResize");
var PHXGridLayout = function (_a) {
var children = _a.children, className = _a.className, _b = _a.col, col = _b === void 0 ? 1 : _b, _c = _a.data, data = _c === void 0 ? [] : _c, _d = _a.gap, gap = _d === void 0 ? 3 : _d, _e = _a.isCustomComponent, isCustomComponent = _e === void 0 ? false : _e;
var width = (0, useResize_1.useResize)();
return (react_1["default"].createElement("div", { className: className },
react_1["default"].createElement("div", { className: 'grid sm:grid-cols-2 md:grid-cols-3', style: width < 1024
? { gap: "".concat(4 * gap, "px") }
: {
gridTemplateColumns: "repeat(".concat(col, ", minmax(0, 1fr))"),
gap: "".concat(4 * gap, "px")
} }, isCustomComponent ? (react_1["default"].createElement(react_1["default"].Fragment, null, children)) : (react_1["default"].createElement(react_1["default"].Fragment, null, data.map(function (item, index) { return (react_1["default"].createElement("div", { key: index + 1, className: 'flex flex-col gap-y-1' },
react_1["default"].createElement("div", { className: 'text-xs leading-5 text-gray-600' }, item.title),
react_1["default"].createElement("div", { className: 'text-xs font-semibold leading-[1.2rem] text-gray-900' }, item.content))); }))))));
};
exports.PHXGridLayout = PHXGridLayout;
//# sourceMappingURL=GridLayout.js.map