return ( <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4"> {addons.map(addon => ( <div key={addon.id} onClick={() => toggleAddon(addon)} className={ border p-4 rounded-lg cursor-pointer transition ${selected.find(a => a.id === addon.id) ? "bg-rose-50 border-rose-400" : "bg-white"} }> <h3 className="font-semibold">{addon.name}</h3> <p className="text-gray-600">${addon.price}</p> </div> ))} </div> ); } import { useEffect, useState } from "react"; export default function HoneymoonCountdown({ weddingDate }) { const [daysLeft, setDaysLeft] = useState(0);
{ "profileId": "prof_abc", "packageId": "pkg_123", "checkIn": "2025-06-20", "checkOut": "2025-06-27", "addOnIds": ["addon_spa", "addon_dinner"] } Booking confirmation + total price. GET /api/honeymoon/booking/:bookingId Fetch booking details with itinerary and romantic tips. 4. Frontend UI Components (React + TailwindCSS) HoneymoonWizard.jsx – Step-by-step setup import { useState } from "react"; export default function HoneymoonWizard({ userId }) { const [step, setStep] = useState(1); const [profile, setProfile] = useState({ weddingDate: "", totalBudget: "", vibe: "relaxing" }); honeymoon
const toggleAddon = (addon) => { const exists = selected.find(a => a.id === addon.id); const updated = exists ? selected.filter(a => a.id !== addon.id) : [...selected, addon]; setSelected(updated); onTotalChange(updated.reduce((sum, a) => sum + a.price, 0)); }; setStep] = useState(1)