function BannerSlider({ banners = [] }) { const [currentSlide, setCurrentSlide] = useState(0); const nextSlide = ()=>{ setCurrentSlide((prev)=>(prev + 1) % banners.length); }; const prevSlide = ()=>{ setCurrentSlide((prev)=>(prev - 1 + banners.length) % banners.length); }; useEffect(()=>{ const timer = setInterval(nextSlide, 5000); return ()=>clearInterval(timer); }, []); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full overflow-hidden h-[400px]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute flex w-full h-full transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentSlide * 100}%)` }, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, banners.map((banner, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "min-w-full h-full", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: banner.image, alt: banner.alt, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/70 to-transparent", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-bold text-2xl md:text-3xl font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, banner.title), /*#__PURE__*/ React.createElement("p", { className: "text-white mt-2 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, banner.description))))), /*#__PURE__*/ React.createElement("button", { onClick: prevSlide, className: "absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: nextSlide, className: "absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-xl", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, banners.map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setCurrentSlide(index), className: `w-2 h-2 rounded-full ${currentSlide === index ? "bg-white" : "bg-white/50"}`, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this })))); } function BannerSliderStory() { const demoBanners = [ { image: "/promo1.jpg", alt: "Special summer sale promotion with beach theme", title: "Summer Sale", description: "Up to 50% off on summer essentials" }, { image: "/promo2.jpg", alt: "New collection launch featuring autumn wear", title: "New Arrivals", description: "Discover our latest collection" }, { image: "/promo3.jpg", alt: "Holiday season special deals and offers", title: "Holiday Specials", description: "Get ready for the festive season" } ]; return /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BannerSlider, { banners: demoBanners, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); } function BusinessCard({ businessName, rating, address, description, offers }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-md rounded-lg shadow-lg bg-white p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, businessName), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-1", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-yellow-400", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1 text-gray-600", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, rating))), /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-bookmark text-xl", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-gray-500 mt-1", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "ml-2 text-gray-600", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, address)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-3 text-gray-800", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Available Offers"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, offers?.map((offer, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between bg-gray-50 p-3 rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tag text-green-500", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, offer.title)), /*#__PURE__*/ React.createElement("span", { className: "text-green-600 font-medium", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, offer.discount)))))); } function BusinessCardStory() { const sampleBusinessData = { businessName: "Green Cafe", rating: "4.5", address: "123 Main Street, City, State", description: "A cozy cafe serving organic coffee and fresh pastries in a relaxed atmosphere.", offers: [ { title: "Morning Special", discount: "20% OFF" }, { title: "Weekend Brunch", discount: "15% OFF" }, { title: "Student Discount", discount: "10% OFF" } ] }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-100", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BusinessCard, { ...sampleBusinessData, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this })); } function CouponCard({ title, discount, description, validUntil, onShare, onRedeem }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-sm rounded-lg bg-white shadow-lg p-6", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#2C3E50] font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold text-[#E74C3C] font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, discount), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Valid until: ", validUntil), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 pt-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onShare, className: "flex-1 bg-[#3498DB] hover:bg-[#2980B9] text-white font-roboto py-2 px-4 rounded-lg inline-block", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt mr-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }), "Share"), /*#__PURE__*/ React.createElement("button", { onClick: onRedeem, className: "flex-1 bg-[#2ECC71] hover:bg-[#27AE60] text-white font-roboto py-2 px-4 rounded-lg inline-block", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ticket-alt mr-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), "Redeem")))); } function CouponCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(CouponCard, { title: "Summer Special", discount: "50% OFF", description: "Get amazing discounts on all summer collection items", validUntil: "August 31, 2024", onShare: ()=>alert("Share clicked"), onRedeem: ()=>alert("Redeem clicked"), __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(CouponCard, { title: "First Purchase", discount: "₹200 OFF", description: "Special discount for your first order with us", validUntil: "December 31, 2024", onShare: ()=>alert("Share clicked"), onRedeem: ()=>alert("Redeem clicked"), __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }))); } function CategoryMenu() { const [selectedCategory, setSelectedCategory] = useState(""); const [selectedSubcategory, setSelectedSubcategory] = useState(""); const categories = { Retail: [ "Apparel", "Electronics", "Home Goods", "Books" ], Food: [ "Restaurants", "Cafes", "Food Trucks", "Bakeries" ], Services: [ "Beauty", "Healthcare", "Legal", "Financial" ], Technology: [ "Software", "Hardware", "Consulting", "Cloud Services" ] }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-full md:w-64 p-2 border rounded-lg bg-white", value: selectedCategory, onChange: (e)=>{ setSelectedCategory(e.target.value); setSelectedSubcategory(""); }, __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Select Category"), Object.keys(categories).map((category)=>/*#__PURE__*/ React.createElement("option", { key: category, value: category, __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, category)))), selectedCategory && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-full md:w-64 p-2 border rounded-lg bg-white", value: selectedSubcategory, onChange: (e)=>setSelectedSubcategory(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Select Subcategory"), categories[selectedCategory].map((subcategory)=>/*#__PURE__*/ React.createElement("option", { key: subcategory, value: subcategory, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, subcategory))))); } function CategoryMenuStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CategoryMenu, { __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function WalletDisplay({ balance = 1234.56, transactions = [ { id: 1, type: "credit", amount: 500, description: "Salary", date: "2024-01-15" }, { id: 2, type: "debit", amount: 50, description: "Grocery Shopping", date: "2024-01-14" }, { id: 3, type: "debit", amount: 30, description: "Coffee Shop", date: "2024-01-13" } ] }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-xl shadow-lg p-6 m-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8f9fa] rounded-lg p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-700 mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Wallet Balance"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold text-[#2c3e50]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "$", balance.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-700 mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Recent Transactions"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, transactions.map((transaction)=>/*#__PURE__*/ React.createElement("div", { key: transaction.id, className: "flex items-center justify-between p-3 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-10 h-10 rounded-full flex items-center justify-center ${transaction.type === "credit" ? "bg-green-100" : "bg-red-100"}`, __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${transaction.type === "credit" ? "fa-arrow-down text-green-500" : "fa-arrow-up text-red-500"}`, __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-800", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, transaction.description), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this }, transaction.date))), /*#__PURE__*/ React.createElement("span", { className: `font-semibold ${transaction.type === "credit" ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, transaction.type === "credit" ? "+" : "-", "$", transaction.amount))))))); } function WalletDisplayStory() { const mockTransactions = [ { id: 1, type: "credit", amount: 1000, description: "Payment Received", date: "2024-01-15" }, { id: 2, type: "debit", amount: 25.5, description: "Restaurant", date: "2024-01-14" }, { id: 3, type: "credit", amount: 500, description: "Refund", date: "2024-01-13" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen p-4", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WalletDisplay, { balance: 2500.75, transactions: mockTransactions, __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(WalletDisplay, { __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this })); } function MainComponent() { const [transactions] = useState([ { id: 1, type: "credit", amount: 100, description: "Sign Up Bonus", date: "2024-01-10" }, { id: 2, type: "debit", amount: 25, description: "Coffee Shop Coupon Used", date: "2024-01-15" } ]); const [coupons] = useState([ { title: "50% Off First Order", discount: "50% OFF", description: "Get 50% off on your first order", validUntil: "March 31, 2024" }, { title: "Free Coffee", discount: "100% OFF", description: "One free coffee at participating cafes", validUntil: "April 15, 2024" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#2C3E50] mb-8", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "My Wallet"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Wallet Balance"), /*#__PURE__*/ React.createElement(WalletDisplay, { balance: 250, transactions: transactions, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "My Coupons"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, coupons.map((coupon, index)=>/*#__PURE__*/ React.createElement(CouponCard, { key: index, ...coupon, onShare: ()=>alert("Coupon shared!"), onRedeem: ()=>alert("Coupon redeemed!"), __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }))))))); }