function MainComponent() { const [review, setReview] = React.useState(""); const [comments, setComments] = React.useState([]); const [product, setProduct] = React.useState(""); const [loading, setLoading] = React.useState(false); const submitReview = async ()=>{ setLoading(true); try { const response = await fetch('/api/reviews', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ review, product }) }); if (response.ok) { const newReview = await response.json(); setComments([ ...comments, newReview ]); setReview(""); } else { console.error("Review submission failed"); } } catch (error) { console.error(error); } setLoading(false); }; const handleProductChange = (e)=>{ setProduct(e.target.value); }; const handleReviewChange = (e)=>{ setReview(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row w-full h-screen bg-gray-50", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:w-1/2 w-full h-full overflow-auto p-4 bg-white", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "product", className: "block mb-2 font-semibold", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "製品名"), /*#__PURE__*/ React.createElement("select", { id: "product", name: "product", value: product, onChange: handleProductChange, className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "製品を選択してください"), /*#__PURE__*/ React.createElement("option", { value: "ProductA", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "製品A"), /*#__PURE__*/ React.createElement("option", { value: "ProductB", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "製品B"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "review", className: "block mb-2 font-semibold", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "レビュー"), /*#__PURE__*/ React.createElement("textarea", { id: "review", name: "review", value: review, onChange: handleReviewChange, placeholder: "製品に関するレビューを入力してください", className: "w-full h-32 p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: submitReview, className: "mt-2 bg-blue-500 text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, loading ? '送信中...' : 'レビューを投稿'))), /*#__PURE__*/ React.createElement("div", { className: "lg:w-1/2 w-full h-full overflow-auto p-4", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "投稿されたレビュー"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, comments.map((comment, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-gray-100 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, comment.product), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, comment.review)))))); }