function MainComponent() { const [modalOpen, setModalOpen] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen flex items-center justify-center px-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[3840px] bg-[#1E1E1E] rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-5", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Cool Design Table"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Check out this design")), /*#__PURE__*/ React.createElement("div", { className: "relative w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./cool-photo.jpg", alt: "An embedded cool photo", className: "object-cover w-full h-full", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 cursor-pointer", onClick: ()=>setModalOpen(true), __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto text-sm", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "3Dデータを見る")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-5 border-r border-gray-700", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Column 1"), /*#__PURE__*/ React.createElement("ul", { className: "text-gray-400", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, [ ...Array.from({ length: 22 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("li", { key: i, __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, "Row ", i + 1)))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-5", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Column 2"), /*#__PURE__*/ React.createElement("ul", { className: "text-gray-400", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, [ ...Array.from({ length: 22 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("li", { key: i, __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "Row ", i + 1)))))), modalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", onClick: ()=>setModalOpen(false), __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-5 rounded-lg max-w-[80%] max-h-[80%] overflow-auto", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "3D Data View")))); }