function MainComponent({ projectName, date, amountPaid, amountOwed, totalAmount, image, title, subtitle }) { const [isOpen, setIsOpen] = React.useState(false); const [currentIndex, setCurrentIndex] = React.useState(0); const [touchStart, setTouchStart] = React.useState(0); const [touchEnd, setTouchEnd] = React.useState(0); const handleToggle = ()=>{ setIsOpen(!isOpen); }; const handleNext = ()=>{ setCurrentIndex((prevIndex)=>prevIndex + 1 >= cards.length - 2 ? 0 : prevIndex + 1); }; const handlePrev = ()=>{ setCurrentIndex((prevIndex)=>prevIndex - 1 < 0 ? cards.length - 3 : prevIndex - 1); }; const handleTouchStart = (e)=>{ setTouchStart(e.touches[0].clientX); }; const handleTouchMove = (e)=>{ setTouchEnd(e.touches[0].clientX); }; const handleTouchEnd = ()=>{ if (touchStart - touchEnd > 75) { handleNext(); } if (touchStart - touchEnd < -75) { handlePrev(); } }; if (image && title && subtitle) { return /*#__PURE__*/ React.createElement("div", { className: "w-full relative", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: title, className: "w-full h-[300px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, subtitle))); } return /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-lg w-full max-w-md", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, date), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, projectName)), /*#__PURE__*/ React.createElement("div", { onClick: handleToggle, className: "cursor-pointer", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${isOpen ? 'up' : 'down'}`, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }))), isOpen && /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Amount Paid: ", amountPaid), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Amount Owed: ", amountOwed), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Total Amount: ", totalAmount))); } function StoryComponent() { const [currentIndex, setCurrentIndex] = React.useState(0); const [touchStart, setTouchStart] = React.useState(0); const [touchEnd, setTouchEnd] = React.useState(0); const cards1 = [ { image: "https://source.unsplash.com/random/400x300?nature", title: "Beautiful Nature", subtitle: "Explore the wilderness" }, { image: "https://source.unsplash.com/random/400x300?city", title: "Urban Life", subtitle: "City adventures await" }, { image: "https://source.unsplash.com/random/400x300?food", title: "Culinary Delights", subtitle: "Taste the world" }, { image: "https://source.unsplash.com/random/400x300?travel", title: "Travel Dreams", subtitle: "Journey to new places" } ]; const handleNext = ()=>{ setCurrentIndex((prevIndex)=>prevIndex + 1 >= cards1.length - 2 ? 0 : prevIndex + 1); }; const handlePrev = ()=>{ setCurrentIndex((prevIndex)=>prevIndex - 1 < 0 ? cards1.length - 3 : prevIndex - 1); }; const handleTouchStart = (e)=>{ setTouchStart(e.touches[0].clientX); }; const handleTouchMove = (e)=>{ setTouchEnd(e.touches[0].clientX); }; const handleTouchEnd = ()=>{ if (touchStart - touchEnd > 75) { handleNext(); } if (touchStart - touchEnd < -75) { handlePrev(); } }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 136, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden", onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 transition-transform duration-300", style: { transform: `translateX(-${currentIndex * (100 / 3)}%)` }, __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, cards1.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full md:w-1/3 flex-shrink-0", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { ...card, __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: handlePrev, className: "absolute left-0 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-50 p-2 rounded-full", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this })))); }