function MainComponent() { const [questions, setQuestions] = React.useState([]); const [questionText, setQuestionText] = React.useState(""); const [answerText, setAnswerText] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (questionText.trim() && answerText.trim()) { setQuestions([ ...questions, { question: questionText, answer: answerText } ]); setQuestionText(""); setAnswerText(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen p-5 bg-[#f9f9f9]", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-5 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "自分で問題をまとめられるアプリ"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg bg-white p-5 rounded-lg shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "question", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "問題"), /*#__PURE__*/ React.createElement("textarea", { id: "question", name: "question", rows: "4", className: "w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:shadow-outline", placeholder: "ここに問題を書いてください。", value: questionText, onChange: (e)=>setQuestionText(e.target.value), __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "answer", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "筏え"), /*#__PURE__*/ React.createElement("textarea", { id: "answer", name: "answer", rows: "4", className: "w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:shadow-outline", placeholder: "ここに答えを書いてください。", value: answerText, onChange: (e)=>setAnswerText(e.target.value), __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "追加"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mt-5", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, questions.map((q, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-5 mb-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "問題 ", index + 1), /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-gray-700", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, q.question), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "答え"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, q.answer))))); }