phx-react
Version:
PHX REACT
32 lines • 2.32 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var outline_1 = require("@heroicons/react/24/outline");
var react_1 = tslib_1.__importDefault(require("react"));
function ListWithCard(_a) {
var filteredItems = _a.filteredItems, isBadge = _a.isBadge, onClickItem = _a.onClickItem, onClickRemoveItem = _a.onClickRemoveItem, readonly = _a.readonly;
var handleClick = function (item) {
if (onClickItem && !readonly) {
onClickItem(item);
}
else {
return;
}
};
var handleRemoveItem = function (item) {
if (onClickRemoveItem && !readonly) {
onClickRemoveItem(item);
}
else {
return;
}
};
return (react_1["default"].createElement("div", { className: 'max-h-[320px] overflow-y-auto' }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (item, index) { return (react_1["default"].createElement("div", { key: index, className: 'mx-auto mb-3 flex max-w-3xl items-center justify-between rounded-lg border border-gray-200 bg-white p-4 shadow-[0rem_0.0825rem_0rem_#00000012] lg:max-w-full' },
react_1["default"].createElement("div", null,
(item === null || item === void 0 ? void 0 : item.name) && (react_1["default"].createElement("p", { "aria-hidden": true, className: "mb-2 text-xs font-medium text-gray-900 ".concat(readonly ? '' : 'text-xs hover:cursor-pointer hover:text-blue-800 hover:underline'), onClick: function () { return handleClick(item); } }, item.name)),
(item === null || item === void 0 ? void 0 : item.location) && (react_1["default"].createElement("p", { className: "text-xs ".concat(isBadge ? 'mt-1' : '', " font-normal text-gray-600") }, item.location))),
react_1["default"].createElement("button", { className: 'rounded-md border border-gray-300 bg-white p-2 font-normal text-gray-900 shadow-sm hover:bg-red-100 focus:outline-none focus-visible:outline-none', onClick: function () { return handleRemoveItem(item); }, type: 'button' },
react_1["default"].createElement(outline_1.TrashIcon, { "aria-hidden": 'true', className: 'h-4 w-4 text-red-800 active:text-red-900' })))); })));
}
exports["default"] = ListWithCard;
//# sourceMappingURL=listWithCard.js.map