function MainComponent({ images, texts, onItemClick, onDrop }) { const handleDragStart = (event, item)=>{ event.dataTransfer.setData('item', JSON.stringify(item)); }; const handleDrop = (event)=>{ event.preventDefault(); const item = JSON.parse(event.dataTransfer.getData('item')); onDrop(item); }; const handleDragOver = (event)=>{ event.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row w-full h-full", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 p-4 overflow-y-scroll", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Images"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, images.map((img, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: img.src, alt: img.alt, className: "w-full h-auto cursor-pointer border border-gray-300", onClick: ()=>onItemClick(img), draggable: true, onDragStart: (event)=>handleDragStart(event, img), __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mt-8 mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Texts"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, texts.map((text, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "cursor-pointer p-2 bg-gray-100 border border-gray-300", onClick: ()=>onItemClick(text), draggable: true, onDragStart: (event)=>handleDragStart(event, text), __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, text)))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-2/3 p-4 bg-gray-100 border-l border-gray-300 flex", onDrop: handleDrop, onDragOver: handleDragOver, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[80%] bg-white border border-gray-300 flex-grow", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const images = [ { src: '/images/sample1.jpg', alt: 'Sample image 1' }, { src: '/images/sample2.jpg', alt: 'Sample image 2' } ]; const texts = [ 'Sample Text 1', 'Sample Text 2' ]; const handleItemClick = (item)=>{ console.log("Item clicked:", item); }; const handleDrop = (item)=>{ console.log("Item dropped:", item); }; return /*#__PURE__*/ React.createElement("div", { className: "h-screen", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { images: images, texts: texts, onItemClick: handleItemClick, onDrop: handleDrop, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this })); }