function MainComponent({ imageUrl, name, age, jobTitle, onReject, onMoreInfo }) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-white w-[400px] rounded-lg shadow-2xl", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `Profile of ${name}, ${age}`, className: "w-full h-[500px] rounded-t-lg object-cover", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, name, ", ", age), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, jobTitle)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onReject, className: "text-red-500 text-3xl", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "❌"), /*#__PURE__*/ React.createElement("button", { onClick: onMoreInfo, className: "text-yellow-500 text-3xl", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "💬"), /*#__PURE__*/ React.createElement("button", { className: "text-green-500 text-3xl", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "💚")), /*#__PURE__*/ React.createElement("button", { onClick: onMoreInfo, className: "absolute bottom-0 right-0 m-4 bg-white p-2 rounded-full shadow-lg text-gray-600", "aria-label": "More Info", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-info", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })))); } function StoryComponent() { const [profiles, setProfiles] = React.useState([ { imageUrl: `images/profile1.jpg`, name: "Emma", age: "30", jobTitle: "Domme", description: "Passionate about fitness and photography." } ]); const [currentIndex, setCurrentIndex] = React.useState(0); const [drawerOpen, setDrawerOpen] = React.useState(false); const onRejectProfile = ()=>{ setDrawerOpen(false); setCurrentIndex((prevIndex)=>{ const nextIndex = (prevIndex + 1) % profiles.length; if (profiles.length - 1 === nextIndex) { const newProfile = { imageUrl: `images/profile${profiles.length + 1}.jpg`, name: "New Profile", age: `${20 + profiles.length}`, jobTitle: "New Title", description: "Enjoys long walks and a good book." }; setProfiles(profiles.concat(newProfile)); } return nextIndex; }); }; const onMoreInfoClick = ()=>{ setDrawerOpen(!drawerOpen); }; const currentProfile = profiles[currentIndex]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-5", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full mx-2 bg-pink-400 text-white font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Female"), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full mx-2 bg-gray-200 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Male")), /*#__PURE__*/ React.createElement(MainComponent, { imageUrl: currentProfile.imageUrl, name: currentProfile.name, age: currentProfile.age, jobTitle: currentProfile.jobTitle, onReject: onRejectProfile, onMoreInfo: onMoreInfoClick, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }), drawerOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg max-w-sm w-full", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, currentProfile.name, "'s Details"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, currentProfile.description), /*#__PURE__*/ React.createElement("button", { onClick: onMoreInfoClick, className: "mt-4 bg-red-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Close")))); }