function NextQuestionButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-[#F44336] text-white font-semibold py-2 px-4 rounded-lg hover:bg-[#D32F2F] float-right", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Skip to next question"); } function NextQuestionButtonStory() { const skipQuestion = ()=>console.log("Next question displayed"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NextQuestionButton, { onClick: skipQuestion, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function UserProfileContainer({ title, history, onRevisionClick, onCommentChange }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg max-w-md w-full p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg text-[#555] mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, history.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-md text-[#666] mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, `${item.question} - あなたは「${item.answer}」を選びました。`), /*#__PURE__*/ React.createElement("button", { className: "bg-[#03A9F4] text-white font-semibold py-1 px-3 rounded-lg hover:bg-[#0288D1]", onClick: ()=>onRevisionClick(item.questionId), __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, "修正")), /*#__PURE__*/ React.createElement("textarea", { className: "block w-full mt-2 p-2 border rounded-lg", placeholder: "コメントを追加", value: item.comment, onChange: (e)=>onCommentChange(e, item.questionId), name: `comment-${item.questionId}`, __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }))))); } function UserProfileContainerStory() { const mockHistory = [ { questionId: 1, question: "好きな色は？", answer: "青", comment: "" }, { questionId: 2, question: "好きな食べ物は？", answer: "寿司", comment: "" } ]; const handleRevision = (questionId)=>{ console.log("Revise clicked for questionId:", questionId); }; const handleCommentChange = (e, questionId)=>{ console.log("Comment for questionId", questionId, "is now", e.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserProfileContainer, { title: "プロフィール情報", history: mockHistory, onRevisionClick: handleRevision, onCommentChange: handleCommentChange, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this })); } function MainComponent() { const [question, setQuestion] = React.useState({}); const [history, setHistory] = React.useState([]); const [loading, setLoading] = React.useState(false); const fetchQuestion = ()=>{ setLoading(true); fetch('/api/questions/random', { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setQuestion({ id: data.id, text: data.question, answer1: data.options[0], answer2: data.options[1] }); setLoading(false); }).catch(()=>setLoading(false)); }; React.useEffect(()=>{ fetchQuestion(); }, []); const handleAnswer = (answer)=>{ setHistory([ ...history, { questionId: question.id, question: question.text, answer, comment: '' } ]); fetchQuestion(); }; const handleSkip = ()=>{ fetchQuestion(); }; const handleCommentChange = (event, questionId)=>{ const updatedHistory = history.map((item)=>{ if (item.questionId === questionId) { return { ...item, comment: event.target.value }; } return item; }); setHistory(updatedHistory); }; const handleRevision = (questionId)=>{ const questionToRevise = history.find((q)=>q.questionId === questionId); if (questionToRevise) { setQuestion(questionToRevise); } }; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 55, columnNumber: 12 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 97 }, __self: this }, "Loading...")); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F2F5] p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl text-[#333] mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "二択の質問"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg max-w-md w-full p-6 mb-4 animate-showup", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg text-[#555]", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "この質問に回答してください："), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#666] mt-2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, question.text)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] text-white font-semibold py-2 px-4 rounded-lg hover:bg-[#45A049]", onClick: ()=>handleAnswer(question.answer1), __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, question.answer1), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FFC107] text-white font-semibold py-2 px-4 rounded-lg hover:bg-[#FFB300]", onClick: ()=>handleAnswer(question.answer2), __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, question.answer2)), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(NextQuestionButton, { onClick: handleSkip, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement(UserProfileContainer, { title: "プロフィール情報", history: history, onRevisionClick: handleRevision, onCommentChange: handleCommentChange, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, ` @keyframes showup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-showup { animation: showup 0.5s ease-out forwards; } `)); }