list-view-details/dist/components/MenuItem/MenuItem.js

A highly customizable List View Details component for React applications. This package provides an efficient and flexible way to display data in a detailed, organized, and user-friendly list view.

import React, { useState } from 'react';
import ItemComponent from './ItemComponent';
var MenuItem = function (_a) {
    var items = _a.items;
    var _b = useState(items.map(function () { return 0; })), quantities = _b[0], setQuantities = _b[1];
    console.log("quantities---", quantities);
    var handleIncrement = function (index) {
        setQuantities(quantities.map(function (quantity, i) { return i === index ? quantity + 1 : quantity; }));
    };
    var handleDecrement = function (index) {
        setQuantities(quantities.map(function (quantity, i) { return i === index && quantity > 0 ? quantity - 1 : quantity; }));
    };
    var handleAddCart = function (index) {
        alert(items[index].name);
    };
    return (React.createElement("div", { className: 'flex flex-col w-screen md:w-5/12 m-auto container overflow-y-scroll' }, items.map(function (item, index) { return (React.createElement(ItemComponent, { key: index, imageUrl: item === null || item === void 0 ? void 0 : item.imageUrl, name: item.name, description: item === null || item === void 0 ? void 0 : item.description, quantity: quantities[index], price: item.price, onIncrement: function () { return handleIncrement(index); }, onDecrement: function () { return handleDecrement(index); }, addCart: function () { return handleAddCart(index); } })); })));
};
export default MenuItem;