function MainComponent({ title, items }) { return /*#__PURE__*/ React.createElement("div", { className: "p-[20px] bg-[#f7f7f7] min-h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#333] text-3xl mb-6 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-lg rounded-lg p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `${item.name} product image`, className: "w-[200px] h-[200px] object-cover", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mt-2", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, item.price, " ج.م"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#007bff] text-white font-bold py-2 px-4 rounded hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "أضف إلى السلة"))))); } function StoryComponent() { const sampleItems = [ { name: "تفاح", price: "20 ج.م", image: "./images/apple.jpg" }, { name: "موز", price: "25 ج.م", image: "./images/banana.jpg" }, { name: "برتقال", price: "15 ج.م", image: "./images/orange.jpg" }, { name: "طماطم", price: "10 ج.م", image: "./images/tomato.jpg" }, { name: "خيار", price: "5 ج.م", image: "./images/cucumber.jpg" }, { name: "فلفل", price: "8 ج.م", image: "./images/pepper.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "متجر المواد الغذائية", items: sampleItems, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); }