function ArtGalleryViewer({ title, items }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-8 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text mt-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 shadow-lg", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.imgSrc, alt: item.imgAlt, className: "w-full h-[300px] object-cover mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#555] mt-2 font-crimson-text", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Preis: ", item.price), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-4 bg-blue-500 text-white font-crimson-text", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Kaufen"))))); } function ArtGalleryViewerStory() { const items = [ { imgSrc: "./art1.jpg", imgAlt: "Abstrakte Kunst", title: "Abstrakte Kunst", price: "€500" }, { imgSrc: "./art2.jpg", imgAlt: "Moderne Kunst", title: "Moderne Kunst", price: "€750" }, { imgSrc: "./art3.jpg", imgAlt: "Klassische Kunst", title: "Klassische Kunst", price: "€1000" }, { imgSrc: "./art4.jpg", imgAlt: "Surreale Kunst", title: "Surreale Kunst", price: "€600" }, { imgSrc: "./art5.jpg", imgAlt: "Minimalistische Kunst", title: "Minimalistische Kunst", price: "€450" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArtGalleryViewer, { title: "Kunstausstellung", items: items, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function MainComponent() { const items = [ { imgSrc: "./art1.jpg", imgAlt: "Abstrakte Kunst", title: "Abstrakte Kunst", price: "€500" }, { imgSrc: "./art2.jpg", imgAlt: "Moderne Kunst", title: "Moderne Kunst", price: "€750" }, { imgSrc: "./art3.jpg", imgAlt: "Klassische Kunst", title: "Klassische Kunst", price: "€1000" }, { imgSrc: "./art4.jpg", imgAlt: "Surreale Kunst", title: "Surreale Kunst", price: "€600" }, { imgSrc: "./art5.jpg", imgAlt: "Minimalistische Kunst", title: "Minimalistische Kunst", price: "€450" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArtGalleryViewer, { title: "Kunstausstellung", items: items, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); }