phx-react
Version:
PHX REACT
31 lines • 2.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const outline_1 = require("@heroicons/react/24/outline");
const react_1 = tslib_1.__importDefault(require("react"));
function ListWithCard({ filteredItems, isBadge, onClickItem, onClickRemoveItem, readonly }) {
const handleClick = (item) => {
if (onClickItem && !readonly) {
onClickItem(item);
}
else {
return;
}
};
const handleRemoveItem = (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((item, index) => (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 ${readonly ? '' : 'text-xs hover:cursor-pointer hover:text-blue-800 hover:underline'}`, onClick: () => handleClick(item) }, item.name)),
(item === null || item === void 0 ? void 0 : item.location) && (react_1.default.createElement("p", { className: `text-xs ${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: () => 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