function MainComponent({ barName, navLinks, socialLinks }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen font-sans", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a1a1a] text-white py-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, barName), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, navLinks.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 10, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "hover:text-gray-300 transition-colors duration-200", __source: { fileName: "", lineNumber: 11, columnNumber: 19 }, __self: this }, link.text))))))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a1a1a] text-white py-6", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "© 2023 ", barName, ". All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, socialLinks.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.href, className: "text-xl hover:text-gray-300 transition-colors duration-200", "aria-label": link.label, __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab fa-${link.icon}`, __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this })))))))); } function StoryComponent() { const barName = "Stylish Bar"; const navLinks = [ { href: "#", text: "ホーム" }, { href: "#", text: "メニュー" }, { href: "#", text: "予約" }, { href: "#", text: "アクセス" } ]; const socialLinks = [ { href: "#", icon: "facebook", label: "Facebook" }, { href: "#", icon: "twitter", label: "Twitter" }, { href: "#", icon: "instagram", label: "Instagram" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { barName: barName, navLinks: navLinks, socialLinks: socialLinks, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this })); }