function MainComponent() { const [selectedCode, setSelectedCode] = React.useState(null); const diagCodes = [ { code: "P0300", description: "ランダム/複数気筒の失火を検出" }, { code: "P0171", description: "燃料系統が薄すぎる" }, { code: "P0420", description: "触媒システムの効率が基準値以下" }, { code: "P0101", description: "吸気流量センサーの範囲/性能" }, { code: "P0401", description: "排気ガス再循環システムの流量不足" } ]; const handleCodeClick = (code)=>{ setSelectedCode(code); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center px-4 py-4 bg-[#f0f4f8] h-screen", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full text-center mb-4 font-bold text-3xl text-[#1f2937] font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "自動車の故障診断"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row max-w-4xl w-full h-full rounded-lg overflow-hidden shadow-xl bg-white", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/3 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2 font-roboto bg-[#1f2937] text-white p-2 rounded-t-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "ダイアグコード一覧"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, diagCodes.map((diagCode)=>/*#__PURE__*/ React.createElement("li", { key: diagCode.code, className: "p-1 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 flex items-center", onClick: ()=>handleCodeClick(diagCode), __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-yellow-500 mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold font-roboto mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, diagCode.code), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-crimson-text truncate", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, diagCode.description))))), selectedCode && /*#__PURE__*/ React.createElement("div", { className: "md:w-2/3 p-4 border-l border-gray-300", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-1 font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, selectedCode.code, " の詳細"), /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "説明: ", selectedCode.description), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "推奨される対処法:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "車両の診断システムを使用して、エラーコードを確認する"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "関連するセンサーやコンポーネントを点検する"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "必要に応じて、専門のメカニックに相談する")))))); }