function MainComponent() { const [connections, setConnections] = React.useState([]); const prefectures = [ { name: "Tokyo", city: "Tokyo" }, { name: "Kanagawa", city: "Yokohama" }, { name: "Chiba", city: "Chiba" }, { name: "Saitama", city: "Saitama" }, { name: "Ibaraki", city: "Mito" }, { name: "Tochigi", city: "Utsunomiya" }, { name: "Gunma", city: "Maebashi" } ]; const handleDragStart = (e, item)=>{ e.dataTransfer.setData("item", JSON.stringify(item)); }; const handleDrop = (e, target)=>{ const item = JSON.parse(e.dataTransfer.getData("item")); const newConnections = [ ...connections, { from: item, to: target } ]; setConnections(newConnections); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full h-full p-4 bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "線つなぎのクイズ"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "関東地方の7都道府県の県庁所在地をつなげてください"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-around w-full mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px]", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "都道府県"), prefectures.map((pref)=>/*#__PURE__*/ React.createElement("div", { key: pref.name, className: "p-2 m-1 bg-white border border-gray-200 rounded-md cursor-pointer", draggable: true, onDragStart: (e)=>handleDragStart(e, pref), __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, pref.name))), /*#__PURE__*/ React.createElement("div", { className: "w-[200px]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "県庁所在地"), prefectures.map((pref)=>/*#__PURE__*/ React.createElement("div", { key: pref.city, className: "p-2 m-1 bg-white border border-gray-200 rounded-md cursor-pointer", onDrop: (e)=>handleDrop(e, pref), onDragOver: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, pref.city)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "あなたの対応"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, connections.map((con, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mt-1", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, con.from.name, " - ", con.to.city))))); }