function MainComponent() { const meats = [ { id: "chicken", name: "Курица", price: 200, marinades: [ "Острый", "Сладкий", "Кисло-сладкий", "С солью" ], image: "./images/chicken.jpg" }, { id: "turkey", name: "Индейка", price: 300, marinades: [ "Карри", "Чесночный", "Сладкий", "Острый" ], image: "./images/turkey.jpg" }, { id: "pork", name: "Свинина", price: 400, marinades: [ "С солью", "Кисло-сладкий", "Острый", "Чесночный" ], image: "./images/pork.jpg" }, { id: "beef", name: "Говядина", price: 500, marinades: [ "Чесночный", "Карри", "Сладкий", "Острый" ], image: "./images/beef.jpg" } ]; const [selectedMarinades, setSelectedMarinades] = React.useState({}); const [visibleDropdown, setVisibleDropdown] = React.useState(null); const [quantity, setQuantity] = React.useState({}); const [cart, setCart] = React.useState([]); const selectMarinade = (meatId, marinade)=>{ setSelectedMarinades((current)=>({ ...current, [meatId]: marinade })); setVisibleDropdown(null); if (!quantity[meatId]) setQuantity((current)=>({ ...current, [meatId]: 100 })); }; const toggleDropdown = (meatId)=>{ setVisibleDropdown((current)=>current === meatId ? null : meatId); }; const addToCart = (meatId)=>{ const meat = meats.find((m)=>m.id === meatId); const priceForQuantity = quantity[meatId] / 100 * meat.price; setCart((current)=>[ ...current, { meatId, marinade: selectedMarinades[meatId], quantity: quantity[meatId], price: priceForQuantity } ]); setSelectedMarinades((current)=>{ const updatedMarinades = { ...current }; delete updatedMarinades[meatId]; return updatedMarinades; }); setQuantity((current)=>{ const updatedQuantities = { ...current }; delete updatedQuantities[meatId]; return updatedQuantities; }); }; const updateQuantity = (meatId, event)=>{ const { value } = event.target; setQuantity((current)=>({ ...current, [meatId]: Number(value) })); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, meats.map((meat)=>/*#__PURE__*/ React.createElement("div", { key: meat.id, className: "bg-[#f9f9f9] p-4 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: meat.image, alt: `${meat.name} image`, className: "w-full h-[200px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, meat.name, " ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 58, columnNumber: 27 }, __self: this }, `${meat.price} руб/100г`)), /*#__PURE__*/ React.createElement("div", { className: "relative inline-block", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleDropdown(meat.id), className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Выберите маринад"), visibleDropdown === meat.id && /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white shadow-lg rounded-lg mt-2 w-48 z-20", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, meat.marinades.map((marinade)=>/*#__PURE__*/ React.createElement("div", { key: marinade, onClick: ()=>selectMarinade(meat.id, marinade), className: `p-2 hover:bg-gray-100 cursor-pointer ${selectedMarinades[meat.id] === marinade ? "bg-gray-200" : ""}`, __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this }, marinade)))), selectedMarinades[meat.id] && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", value: quantity[meat.id] || "", onChange: (event)=>updateQuantity(meat.id, event), className: "border p-2 rounded w-full", min: "100", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(meat.id), className: "mt-2 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded block w-full", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "Добавить в корзину"))))), cart.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-10 bg-[#f0f0f0] p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Ваша корзина"), cart.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, meats.find((meat)=>meat.id === item.meatId).name, ", Маринад: ", item.marinade, ", Количество: ", item.quantity, "г, Стоимость: ", item.price, " руб")))); }

Курица 200 руб/100г

Индейка 300 руб/100г

Свинина 400 руб/100г

Говядина 500 руб/100г