function MainComponent() { const [popularVideos, setPopularVideos] = React.useState([]); const [loading, setLoading] = React.useState(false); const fetchPopularVideos = async ()=>{ setLoading(true); try { setTimeout(()=>{ setPopularVideos([ { title: "動画タイトル1", author: "作者1", views: "再生数: 120万回", thumbnail: "path/to/thumbnail1.jpg" }, { title: "動画タイトル2", author: "作者2", views: "再生数: 300万回", thumbnail: "path/to/thumbnail2.jpg" } ]); setLoading(false); }, 1000); } catch (error) { console.error("Error fetching popular videos", error); setLoading(false); } }; React.useEffect(()=>{ fetchPopularVideos(); }, []); if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-center p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 12 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-4xl mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "人気の動画"), /*#__PURE__*/ React.createElement("p", { className: "text-[#787878] mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "ロード中...")); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-center p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-4xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "人気の動画"), popularVideos.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-[#787878] mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "人気の動画はありません。") : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, popularVideos.map((video, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-white shadow rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: `${video.title}のサムネイル`, className: "w-full h-[200px] object-cover rounded mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#00f] mb-1", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, video.author), /*#__PURE__*/ React.createElement("p", { className: "text-[#787878]", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, video.views)))), /*#__PURE__*/ React.createElement("button", { onClick: fetchPopularVideos, className: "bg-[#1DA1F2] hover:bg-[#0d95e8] text-white font-bold py-2 px-4 rounded mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "更新")); }