function MainComponent() { const [selectedCommand, setSelectedCommand] = React.useState(''); const [commandDetails, setCommandDetails] = React.useState(''); const commandsList = [ { name: 'ls', description: 'リストファイルとディレクトリ', exampleImg: '/images/ls_example.png' }, { name: 'cd', description: 'ディレクトリを変更', exampleImg: '/images/cd_example.png' }, { name: 'pwd', description: '現在のディレクトリを表示', exampleImg: '/images/pwd_example.png' }, { name: 'cp', description: 'ファイルをコピー', exampleImg: '/images/cp_example.png' }, { name: 'mv', description: 'ファイルを移動/リネーム', exampleImg: '/images/mv_example.png' }, { name: 'rm', description: 'ファイルを削除', exampleImg: '/images/rm_example.png' }, { name: 'mkdir', description: '新しいディレクトリを作成', exampleImg: '/images/mkdir_example.png' }, { name: 'rmdir', description: 'ディレクトリを削除', exampleImg: '/images/rmdir_example.png' }, { name: 'touch', description: '新しい空のファイルを作成', exampleImg: '/images/touch_example.png' }, { name: 'chmod', description: 'ファイルのパーミッションを変更', exampleImg: '/images/chmod_example.png' } ]; const handleCommandSelect = (command)=>{ setSelectedCommand(command.name); setCommandDetails(command); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-5", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white p-5 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Linuxのコマンドがわかるアプリ"), /*#__PURE__*/ React.createElement("div", { className: "w-full border border-gray-300 p-2 rounded mb-4 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, commandsList.map((command, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full text-left", onClick: ()=>handleCommandSelect(command), name: "command", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, command.name))))), selectedCommand && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, commandDetails.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, commandDetails.description), commandDetails.exampleImg && /*#__PURE__*/ React.createElement("img", { src: commandDetails.exampleImg, alt: `${commandDetails.name} コマンドの例`, className: "mt-2 w-[400px] h-[300px] object-contain", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this })))); }