function MainComponent() { const [equipment, setEquipment] = React.useState("PMC"); const [dimensions, setDimensions] = React.useState([]); const [length, setLength] = React.useState(0); const [width, setWidth] = React.useState(0); const [height, setHeight] = React.useState(0); const [count, setCount] = React.useState(1); const [totalVolume, setTotalVolume] = React.useState(0); const [totalOverhangVolume, setTotalOverhangVolume] = React.useState(0); const [individualVolumes, setIndividualVolumes] = React.useState([]); const [individualHeights, setIndividualHeights] = React.useState([]); const equipmentOptions = [ "PMC", "PAG", "PLA" ]; const PMC_DIMENSIONS = { length: 318, width: 244, maxHeight: 163 }; const handleAddDimension = ()=>{ const newDimension = { length, width, height, count }; setDimensions([ ...dimensions, newDimension ]); calculateTotalVolume([ ...dimensions, newDimension ]); setLength(0); setWidth(0); setHeight(0); setCount(1); }; const calculateTotalVolume = (dims)=>{ let totalVol = 0; let totalOverhang = 0; let vols = []; let heights = []; dims.forEach((dim)=>{ const baseVolume = dim.length * dim.width * dim.height * dim.count; const overhang = dim.height > PMC_DIMENSIONS.maxHeight ? (dim.height - PMC_DIMENSIONS.maxHeight) * dim.length * dim.width * 1.2 * dim.count : 0; const totalDimVolume = baseVolume + overhang; totalVol += baseVolume; totalOverhang += overhang; vols.push(totalDimVolume); heights.push({ length: dim.length, width: dim.width, height: dim.height }); }); setTotalVolume(totalVol); setTotalOverhangVolume(totalOverhang); setIndividualVolumes(vols); setIndividualHeights(heights); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden md:max-w-2xl", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:flex", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `font-bold text-lg mb-2 font-${equipment.toLowerCase()}`, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "容積計算ツール"), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "equipment", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "器材を選択してください:"), /*#__PURE__*/ React.createElement("select", { name: "equipment", id: "equipment", value: equipment, onChange: (e)=>setEquipment(e.target.value), className: "block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, equipmentOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, option))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "length", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "長さ (cm):"), /*#__PURE__*/ React.createElement("input", { name: "length", type: "number", id: "length", value: length, onChange: (e)=>setLength(parseInt(e.target.value)), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "width", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "幅 (cm):"), /*#__PURE__*/ React.createElement("input", { name: "width", type: "number", id: "width", value: width, onChange: (e)=>setWidth(parseInt(e.target.value)), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "height", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "高さ (cm):"), /*#__PURE__*/ React.createElement("input", { name: "height", type: "number", id: "height", value: height, onChange: (e)=>setHeight(parseInt(e.target.value)), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "count", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "数:"), /*#__PURE__*/ React.createElement("input", { name: "count", type: "number", id: "count", value: count, onChange: (e)=>setCount(parseInt(e.target.value)), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-center", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", onClick: handleAddDimension, __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "追加"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "計算結果"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-200 flex items-center justify-center", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, individualVolumes.map((vol, index)=>{ const { length, height } = individualHeights[index]; const hasOverhang = height > PMC_DIMENSIONS.maxHeight; return /*#__PURE__*/ React.createElement("div", { key: index, className: "bg-blue-500 opacity-75 mx-2", style: { width: `${length / 2}px`, height: `${height / 2}px`, overflow: "hidden" }, __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, hasOverhang && /*#__PURE__*/ React.createElement("div", { className: "bg-blue-300 opacity-75", style: { width: `${length / 2}px`, height: `${(height - PMC_DIMENSIONS.maxHeight) / 2}px` }, __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this })); })))); }