phx-react
Version:
PHX REACT
28 lines • 1.94 kB
JavaScript
import { TrashIcon } from '@heroicons/react/24/outline';
import React from '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.createElement("div", { className: 'max-h-[320px] overflow-y-auto' }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, index) => (React.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.createElement("div", null,
(item === null || item === void 0 ? void 0 : item.name) && (React.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.createElement("p", { className: `text-xs ${isBadge ? 'mt-1' : ''} font-normal text-gray-600` }, item.location))),
React.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.createElement(TrashIcon, { "aria-hidden": 'true', className: 'h-4 w-4 text-red-800 active:text-red-900' })))))));
}
export default ListWithCard;
//# sourceMappingURL=listWithCard.js.map