function MainComponent({ categories }) { return /*#__PURE__*/ React.createElement("header", { className: "bg-[#000000] p-4 flex items-center justify-between flex-wrap", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-white mr-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "logo.png", alt: "BAR Habit logo", className: "h-10 w-auto mr-3", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-xl", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "BAR Habit")), /*#__PURE__*/ React.createElement("nav", { className: "w-full block flex-grow lg:flex lg:items-center lg:w-auto", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "text-sm lg:flex-grow", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, [ "ホーム", "アバウト", "イベント", "メニュー", "ギャラリー", "コンタクト" ].map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "block mt-4 lg:inline-block lg:mt-0 text-white hover:text-[#FF0000] hover:text-[#00FF00] hover:text-[#FFFF00] mr-4 transition duration-300", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, link)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, ` header ul li:hover { color: #ff0000; } header ul li:nth-child(2):hover { color: #00ff00; } header ul li:nth-child(3):hover { color: #ffff00; } `)); } function StoryComponent() { const categories = [ "All", "Reggae", "Hip-Hop", "Special Events" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { categories: categories, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); }