function MainComponent() { const [activeTab, setActiveTab] = React.useState('sale'); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F7F7F7] p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#FFD700] p-4 text-center font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "AnimeのECサイト")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center my-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 font-roboto ${activeTab === 'sale' ? 'bg-[#FFD700] text-[#333]' : 'bg-white text-[#555]'}`, onClick: ()=>setActiveTab('sale'), __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "販売中"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 font-roboto ${activeTab === 'upcoming' ? 'bg-[#FFD700] text-[#333]' : 'bg-white text-[#555]'}`, onClick: ()=>setActiveTab('upcoming'), __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "販売決定"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 font-roboto ${activeTab === 'ended' ? 'bg-[#FFD700] text-[#333]' : 'bg-white text-[#555]'}`, onClick: ()=>setActiveTab('ended'), __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "販売終了")), /*#__PURE__*/ React.createElement("main", { className: "my-8", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, activeTab === 'sale' && /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/anime-figure-1.jpg", alt: "Anime figure 1 on sale", className: "w-full h-auto", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mt-2", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "Figure A"), /*#__PURE__*/ React.createElement("p", { className: "text-[#333] mt-1", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "¥5000"))), activeTab === 'upcoming' && /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/anime-figure-5.jpg", alt: "Upcoming Anime figure", className: "w-full h-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mt-2", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Figure E"), /*#__PURE__*/ React.createElement("p", { className: "text-[#333] mt-1", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Coming Soon"))), activeTab === 'ended' && /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/anime-figure-6.jpg", alt: "Sold out Anime figure", className: "w-full h-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mt-2", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "Figure F"), /*#__PURE__*/ React.createElement("p", { className: "text-[#333] mt-1", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "Sold Out")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#FFD700] p-4 text-center mt-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#333]", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "© 2023 Anime ECサイト. All rights reserved."))); }