function PictureResizer({ images }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, images.map((img, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: img.src, alt: img.alt, className: "w-[100px] h-[100px] m-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function PictureResizerStory() { const images = [ { src: "./path/to/mom1.jpg", alt: "clothes for mom 1" }, { src: "./path/to/mom2.jpg", alt: "clothes for mom 2" }, { src: "./path/to/mom3.jpg", alt: "clothes for mom 3" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PictureResizer, { images: images, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const imagesMom = [ { src: "./path/to/mom1.jpg", alt: "clothes for mom 1", name: "mom1" }, { src: "./path/to/mom2.jpg", alt: "clothes for mom 2", name: "mom2" }, { src: "./path/to/mom3.jpg", alt: "clothes for mom 3", name: "mom3" } ]; const imagesDad = [ { src: "./path/to/dad1.jpg", alt: "clothes for dad 1", name: "dad1" }, { src: "./path/to/dad2.jpg", alt: "clothes for dad 2", name: "dad2" }, { src: "./path/to/dad3.jpg", alt: "clothes for dad 3", name: "dad3" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-full", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-1/2 border-r border-gray-300 p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Clothes Mom"), imagesMom.map((img, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img.src, alt: img.alt, className: "w-[200px] h-[200px] mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: img.name, __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-1/2 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Clothes Dad"), imagesDad.map((img, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img.src, alt: img.alt, className: "w-[200px] h-[200px] mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: img.name, __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this })))))); }