function MainComponent({ userName, userImage, logo, isOnline = true }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gradient-to-r from-white to-gray-50 shadow-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logo || "/logo.png", alt: "アプリロゴ", className: "h-12 w-auto", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: userImage || "/default-avatar.png", alt: "ユーザープロフィール画像", className: "h-10 w-10 rounded-full object-cover border-2 border-white shadow-sm", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white ${isOnline ? "bg-green-500" : "bg-gray-400"}`, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-sans text-gray-700", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, userName || "ゲスト")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-gray-600 hover:text-gray-800 transition-transform duration-200 hover:rotate-90", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { userName: "田中太郎", userImage: "/user-1.jpg", logo: "/company-logo.png", isOnline: true, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { userName: "山田花子", userImage: "/user-2.jpg", logo: "/company-logo.png", isOnline: false, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this })); }