function MainComponent() { const [news, setNews] = React.useState([ { id: 1, image: 'vtuber1.jpg', title: 'Vtuber 1', description: '新人Vtuber 1の紹介文...' }, { id: 2, image: 'vtuber2.jpg', title: 'Vtuber 2', description: '新人Vtuber 2の紹介文...' }, { id: 3, image: 'vtuber3.jpg', title: 'Vtuber 3', description: '新人Vtuber 3の紹介文...' } ]); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-6", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-center text-[#333]", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "新人Vtuberニュース")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "最新のニュース"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, news.map((item)=>/*#__PURE__*/ React.createElement("article", { key: item.id, className: "bg-white p-4 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `${item.title} introduction`, className: "w-full h-[200px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto mt-4", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, item.description))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "カテゴリ"), /*#__PURE__*/ React.createElement("ul", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "bg-blue-500 text-white px-4 py-2 rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Game"), /*#__PURE__*/ React.createElement("li", { className: "bg-green-500 text-white px-4 py-2 rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Music"), /*#__PURE__*/ React.createElement("li", { className: "bg-red-500 text-white px-4 py-2 rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("li", { className: "bg-yellow-500 text-white px-4 py-2 rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Art"))))); }