function IconToggleComponent({ isOpen }) { return /*#__PURE__*/ React.createElement("i", { className: `font-awesome ${isOpen ? 'fas fa-times' : 'fas fa-bars'}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function IconToggleComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IconToggleComponent, { isOpen: true, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(IconToggleComponent, { isOpen: false, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isOpen, setIsOpen] = React.useState(false); const toggleMenu = ()=>setIsOpen(!isOpen); const stores = [ { id: 1, name: 'Store 1', imageUrl: './store1.jpg', websiteUrl: 'https://www.store1.com' }, { id: 2, name: 'Store 2', imageUrl: './store2.jpg', websiteUrl: 'https://www.store2.com' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1A73E8] p-5 flex justify-between items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-white text-xl", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "商品のまとめサイト"), /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "text-white focus:outline-none", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(IconToggleComponent, { isOpen: isOpen, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `${isOpen ? 'block' : 'hidden'} bg-white p-5`, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-2 text-[#1A73E8]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "店舗リスト"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block text-[#1A73E8]", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "商品リスト")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, stores.map((store)=>/*#__PURE__*/ React.createElement("div", { key: store.id, className: "max-w-[300px] mx-auto overflow-hidden shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: store.imageUrl, alt: `Image of ${store.name}`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg mb-3", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, store.name), /*#__PURE__*/ React.createElement("a", { href: store.websiteUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-block bg-[#1A73E8] text-white px-4 py-2 rounded hover:bg-[#1558B8] transition-colors", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Visit Website")))))); }