function ClubMembersGallery({ members }) { const [selectedMember, setSelectedMember] = React.useState(null); const handleImageClick = (member)=>{ setSelectedMember(member); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, members.map((memberGroup, groupIndex)=>/*#__PURE__*/ React.createElement("div", { key: groupIndex, className: "mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, memberGroup.grade), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, memberGroup.members.map((member, memberIndex)=>/*#__PURE__*/ React.createElement("div", { key: memberIndex, className: "mr-2 mb-2", onClick: ()=>handleImageClick(member), __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/images/member_${memberGroup.grade.toLowerCase()}_${memberIndex + 1}.jpg`, alt: `Member of ${memberGroup.grade.toLowerCase()} ${memberIndex + 1}`, className: "w-[100px] h-[100px] object-cover rounded-full cursor-pointer", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this })))))), selectedMember && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded max-w-sm w-full", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, selectedMember.name), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Grade: ", selectedMember.grade), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedMember(null), className: "py-2 px-4 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Close")))); } function ClubMembersGalleryStory() { const members = [ { grade: 'Grade 1', members: [ { name: 'John', grade: 'Grade 1' }, { name: 'Doe', grade: 'Grade 1' } ] }, { grade: 'Grade 2', members: [ { name: 'Jane', grade: 'Grade 2' }, { name: 'Smith', grade: 'Grade 2' } ] } ]; return /*#__PURE__*/ React.createElement(ClubMembersGallery, { members: members, __source: { fileName: "", lineNumber: 56, columnNumber: 10 }, __self: this }); } function MainComponent() { const members = [ { grade: 'Grade 1', members: [ { name: 'John', grade: 'Grade 1' }, { name: 'Doe', grade: 'Grade 1' } ] }, { grade: 'Grade 2', members: [ { name: 'Jane', grade: 'Grade 2' }, { name: 'Smith', grade: 'Grade 2' } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-black text-white min-h-screen", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "sticky top-0 bg-[#ff5722] p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-around", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#member", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Members"), /*#__PURE__*/ React.createElement("a", { href: "#media", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Media"), /*#__PURE__*/ React.createElement("a", { href: "#ob-og", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "For OB/OG"), /*#__PURE__*/ React.createElement("a", { href: "#result", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Result"), /*#__PURE__*/ React.createElement("a", { href: "#blog", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Blog"), /*#__PURE__*/ React.createElement("a", { href: "#schedule", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Schedule"), /*#__PURE__*/ React.createElement("a", { href: "#auth-people", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "For Authorized People"))), /*#__PURE__*/ React.createElement("section", { id: "home", className: "p-8", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Important information can be seen at a glance.")), /*#__PURE__*/ React.createElement("section", { id: "member", className: "p-8", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Members"), /*#__PURE__*/ React.createElement(ClubMembersGallery, { members: members, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("section", { id: "media", className: "p-8", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Media"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-lg text-[#ff5722]", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Link to SNS 1"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-lg text-[#ff5722] ml-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Link to SNS 2"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-lg text-[#ff5722] ml-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Link to SNS 3")), /*#__PURE__*/ React.createElement("section", { id: "ob-og", className: "p-8", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "For OB/OG"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Important announcement for OBs or OGs.")), /*#__PURE__*/ React.createElement("section", { id: "result", className: "p-8", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Result"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "The result of the match will be displayed with a rich UI.")), /*#__PURE__*/ React.createElement("section", { id: "blog", className: "p-8", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Blog"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Show what we are doing recently."), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-lg text-[#ff5722]", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "View Blog"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-lg text-[#ff5722] ml-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Login to Edit Blog"))), /*#__PURE__*/ React.createElement("section", { id: "schedule", className: "p-8", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Schedule"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-[#ff5722] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Add Event")), /*#__PURE__*/ React.createElement("section", { id: "auth-people", className: "p-8", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "For Authorized People"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Document for reviewing the matches or plans for practice."), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-lg text-[#ff5722]", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Login to View Document"))); }