function MainComponent({ members, size = "medium", showShadow = false }) { const sizeClasses = { small: "w-[24px] h-[24px]", medium: "w-[32px] h-[32px]", large: "w-[40px] h-[40px]" }; const shadowClass = showShadow ? "shadow-[0px_2px_4px_rgba(0,0,0,0.1)]" : ""; const visibleMembers = members.slice(0, 5); const additionalMembersCount = members.length - 5; const additionalMembersNames = members.slice(5).map((member)=>member.name).join(', '); return /*#__PURE__*/ React.createElement("div", { className: "flex -space-x-3 items-center", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, visibleMembers.map((member, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: member.imageUrl, alt: member.name, className: `${sizeClasses[size]} rounded-full border-2 border-white ${shadowClass} lazyload`, loading: "lazy", title: member.name, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this })), additionalMembersCount > 0 && /*#__PURE__*/ React.createElement("div", { className: `${sizeClasses[size]} rounded-full bg-[#007BFF] flex items-center justify-center text-white`, title: additionalMembersNames, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "+", additionalMembersCount)); } function StoryComponent() { const members = [ { imageUrl: "/path/to/avatar1.png", name: "Alice" }, { imageUrl: "/path/to/avatar2.png", name: "Bob" }, { imageUrl: "/path/to/avatar3.png", name: "Charlie" }, { imageUrl: "/path/to/avatar4.png", name: "Dana" }, { imageUrl: "/path/to/avatar5.png", name: "Elliot" }, { imageUrl: "/path/to/avatar6.png", name: "Fiona" } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "Avatar Stack Examples"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-md", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Small Size"), /*#__PURE__*/ React.createElement(MainComponent, { members: members, size: "small", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-md", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Medium Size (Default)"), /*#__PURE__*/ React.createElement(MainComponent, { members: members, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-md", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Large Size"), /*#__PURE__*/ React.createElement(MainComponent, { members: members, size: "large", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }))); }