function MainComponent() { const [fortunes, setFortunes] = React.useState([ '', '', '' ]); const [inputWord, setInputWord] = React.useState(''); const [displayWord, setDisplayWord] = React.useState(''); const adviceList = [ '未決', '承認', '否認', '否定', '五分五分', 'どちらとも言えない', '可もなく不可もなく', '悪くはない', '及第点ではある', '微妙', '検討の余地あり', '妥当', 'アイデアは良い', '良いとは思う', '場合によってはアリ', '無難な線', 'もうちょい揉んでみたら？', 'かなり人を選ぶ', '日による', '安牌', '無くはない', 'まぁいいんじゃない？', 'ご自由にどうぞ', '判断できない', 'ちょっと考えさせて', 'まあまあ', '他の案も考えよう', '問題ないとは思う', '好きにすれば？' ]; const generateFortunes = ()=>{ const newFortunes = fortunes.map(()=>adviceList[Math.floor(Math.random() * adviceList.length)]); setFortunes(newFortunes); setDisplayWord(inputWord); setInputWord(''); }; React.useEffect(()=>{ generateFortunes(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black p-4 font-sans flex flex-col items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-center text-white mb-4 md:mb-8", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "MAGI SYSTEM"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4 md:gap-6 w-full max-w-[990px]", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-2 md:p-4 rounded-lg shadow-md h-[180px] md:h-[300px] w-full max-w-[480px] flex flex-col items-center justify-between", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-lg md:text-2xl font-sans font-extrabold", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "BALTHASAR-2"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800 text-center text-3xl md:text-6xl font-serif font-extrabold leading-tight break-words", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, fortunes[2]), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 md:gap-6 w-full justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-2 md:p-4 rounded-lg shadow-md h-[180px] md:h-[300px] w-full max-w-[480px] flex flex-col items-center justify-between", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800 text-center text-3xl md:text-6xl font-serif font-extrabold leading-tight break-words", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, fortunes[0]), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-lg md:text-2xl font-sans font-extrabold", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "CASPER-3")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-2 md:p-4 rounded-lg shadow-md h-[180px] md:h-[300px] w-full max-w-[480px] flex flex-col items-center justify-between", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800 text-center text-3xl md:text-6xl font-serif font-extrabold leading-tight break-words", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, fortunes[1]), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-lg md:text-2xl font-sans font-extrabold", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "MELCHIOR-1")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 md:mt-8 flex flex-col items-center w-full max-w-[480px] gap-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, displayWord && /*#__PURE__*/ React.createElement("p", { className: "text-white text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, displayWord), /*#__PURE__*/ React.createElement("div", { className: "flex w-full", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputWord, onChange: (e)=>setInputWord(e.target.value), placeholder: "キーワードを入力", className: "p-2 border border-gray-300 rounded-l bg-white text-black flex-grow", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateFortunes, className: "bg-white hover:bg-gray-100 text-black font-bold py-2 px-4 rounded-r w-[150px]", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "MAGIに相談")))); }