function MainComponent() { const [comments, setComments] = React.useState([]); const [newComment, setNewComment] = React.useState(""); const handleCommentChange = (e)=>{ setNewComment(e.target.value); }; const submitComment = ()=>{ if (newComment !== "") { const updatedComments = [ ...comments, newComment ]; setComments(updatedComments); setNewComment(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ffffff] shadow-md", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl text-[#333] font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "トレンド情報"), /*#__PURE__*/ React.createElement("input", { type: "search", placeholder: "トピック検索", className: "border rounded-lg p-2 font-roboto", name: "search", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "py-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "トピック 1"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "トレンド情報の詳細内容")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "トピック 2"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "トレンド情報の詳細内容")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "トピック 3"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "トレンド情報の詳細内容")))), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 mt-8", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "comment", placeholder: "コメントを入力...", className: "w-full h-32 p-4 border rounded-lg font-roboto", value: newComment, onChange: handleCommentChange, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: submitComment, className: "mt-4 px-6 py-2 bg-[#1DA1F2] text-white rounded-lg font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "投稿する"), /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, comments.map((comment, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "border-b border-gray-200 py-2", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, comment)))))); }