function MainComponent() { const [entries, setEntries] = React.useState([]); const [loading, setLoading] = React.useState(false); const [likeCount, setLikeCount] = React.useState({}); const handleEntrySubmit = async (event)=>{ event.preventDefault(); setLoading(true); const formData = new FormData(event.target); const title = formData.get('title'); const value = formData.get('value'); const newEntry = { title, value, id: Math.random().toString(36).substr(2, 9) }; setEntries([ ...entries, newEntry ]); setLikeCount({ ...likeCount, [newEntry.id]: 0 }); setLoading(false); event.target.reset(); }; const handleLike = (id)=>{ setLikeCount({ ...likeCount, [id]: (likeCount[id] || 0) + 1 }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4 bg-gradient-to-r from-purple-500 to-pink-500 min-h-screen", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white shadow-2xl rounded-xl p-8", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-gray-800", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "SNS風辞書管理サービス"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleEntrySubmit, className: "mt-10 space-y-8", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "title", className: "block mb-2 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "投稿タイトル"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "title", name: "title", className: "w-full p-4 border-2 border-gray-300 rounded-lg", placeholder: "タイトルを入力...", required: true, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "value", className: "block mb-2 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "投稿内容"), /*#__PURE__*/ React.createElement("textarea", { id: "value", name: "value", className: "w-full p-4 border-2 border-gray-300 rounded-lg", placeholder: "内容を入力...", required: true, rows: "4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-4 text-xl font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors duration-150 ease-in-out", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, loading ? '投稿中...' : '投稿')), /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-8 text-gray-800", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "投稿一覧"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, entries.map((entry)=>/*#__PURE__*/ React.createElement("li", { key: entry.id, className: "mb-8 p-6 border-2 border-gray-300 rounded-xl", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-2 text-gray-900", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, entry.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, entry.value), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLike(entry.id), className: "flex items-center font-medium text-blue-600 hover:text-blue-800 transition-colors duration-150 ease-in-out", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-thumbs-up mr-2", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }), " いいね！ (", likeCount[entry.id] || 0, ")"))))))); }