function MainComponent() { const [building, setBuilding] = React.useState(""); const [materialsList, setMaterialsList] = React.useState([]); const [tasks, setTasks] = React.useState([]); const [screenshots, setScreenshots] = React.useState([]); const [memo, setMemo] = React.useState(""); const [viewMode, setViewMode] = React.useState("階層ごと"); const handleAddTask = (task)=>{ setTasks([ ...tasks, task ]); }; const handleAddScreenshot = (screenshot)=>{ setScreenshots([ ...screenshots, screenshot ]); }; const handleAddMemo = ()=>{ // Add memo logic }; const handleViewModeChange = (mode)=>{ setViewMode(mode); }; const handleBuildingChange = (e)=>{ setBuilding(e.target.value); // Mock logic to update materials list const buildingsToMaterials = { "house": [ "wood", "stone", "brick" ], "castle": [ "stone", "iron", "wood" ], "farm": [ "wood", "fence", "water" ] }; setMaterialsList(buildingsToMaterials[e.target.value] || []); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-mono text-[#228B22]", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Minecraft建築プランナーツール"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[50%] p-4 border-2 border-[#D3D3D3]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-xl font-mono text-[#006400]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "建築名を入力"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "building", value: building, onChange: handleBuildingChange, className: "mt-2 p-2 w-full border rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[50%] p-4 border-2 border-[#D3D3D3]", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-xl font-mono text-[#006400]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "材料リスト表示エリア"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 w-full h-[300px] bg-[#F5FFFA]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, materialsList.map((material, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, material))))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[50%] p-4 border-2 border-[#D3D3D3]", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-xl font-mono text-[#006400]", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "タスク管理ボード"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 w-full h-[300px] bg-[#FFFACD]", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "タスク管理エリア")), /*#__PURE__*/ React.createElement("div", { className: "w-[50%] p-4 border-2 border-[#D3D3D3]", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-xl font-mono text-[#006400]", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "スクリーンショット添付エリア"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 w-full h-[300px] bg-[#F8F8FF]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "スクリーンショット添付エリア"), /*#__PURE__*/ React.createElement("button", { onClick: handleAddMemo, className: "mt-2 p-2 bg-blue-300 rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "メモを追加"))), /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 border-2 border-[#D3D3D3]", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-xl font-mono text-[#006400]", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "3Dモデル表示エリア"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 w-full h-[300px] bg-[#E0FFFF]", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "3Dモデルがここに表示されます"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-300 rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "視点変更"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); .font-roboto { font-family: 'Roboto', sans-serif; } `)); }