function MainComponent() { const [articles, setArticles] = React.useState([]); const [likes, setLikes] = React.useState({}); React.useEffect(()=>{ const fetchArticles = async ()=>{ const response = await fetch('https://www.googleapis.com/customsearch/v1?key=YOUR_GOOGLE_API_KEY&cx=YOUR_CX&q=隠岐の島町'); const data = await response.json(); const articlesData = data.items.slice(0, 20).map((item)=>({ title: item.title, summary: item.snippet, image: item.pagemap.cse_image && item.pagemap.cse_image[0].src || null })); setArticles(articlesData); }; fetchArticles(); }, []); const handleLike = (index)=>{ setLikes((prev)=>({ ...prev, [index]: (prev[index] || 0) + 1 })); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/okinoshima-town.jpg", alt: "Beautiful view of 隠岐の島町", className: "w-full h-[400px] object-cover", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto my-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "隠岐の島町情報交流サイト"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, articles.map((article, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, article.summary), article.image && /*#__PURE__*/ React.createElement("img", { src: article.image, alt: `View of 隠岐の島町 related to article titled ${article.title}`, className: "w-full h-auto mt-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 font-roboto mr-2", onClick: ()=>handleLike(index), __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "いいね"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, likes[index] || 0)))))); }