[V0_FILE]javascriptreact:file="App.jsx" "use client" import { useState } from "react" import DestinationInput from "./components/DestinationInput" import ItineraryDisplay from "./components/ItineraryDisplay" import Loader from "./components/Loader" import { planTrip } from "./services/api" const App = () => { const [itinerary, setItinerary] = useState("") const [loading, setLoading] = useState(false) const handlePlanTrip = async (formData) => { setLoading(true) const response = await planTrip(formData) setItinerary(response) setLoading(false) } return (

✈️ Smart Trip Planner

Tell us your travel preferences — we'll design your perfect adventure

{!loading && !itinerary && (

Fill out the form below to get your personalized travel itinerary

)} {!loading && !itinerary ? ( ) : (

{loading ? : } {!loading && itinerary && ( )}

)}

) } export default App [V0_FILE]javascriptreact:file="components/DestinationInput.jsx" "use client" import { useState } from "react" const DestinationInput = ({ onSubmit }) => { const [form, setForm] = useState({ departure: "", destination: "", startDate: "", endDate: "", interests: "", budget: "moderate", travelWith: "Just Me", numPeople: "", }) const handleChange = (e) => { const { name, value } = e.target setForm((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e) => { e.preventDefault() onSubmit(form) } const showNumPeople = form.travelWith === "Family" || form.travelWith === "Friends" return (

{/* Location Section */}

📍 Locations

Departure From

Destination

{/* Dates Section */}

🗓️ Travel Dates

Start Date

End Date

{/* Preferences Section */}

❤️ Your Preferences

Interests & Activities

</div>
        </div>

{/* Budget & Travel Group */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-700 flex items-center">
            <span className="mr-2">💰</span> Budget
          </h3>
          <div>
            <label className="block text-sm font-medium text-gray-600 mb-1">Price Range</label>
            <select
              name="budget"
              value={form.budget}
              onChange={handleChange}
              className="w-full p-3 border border-gray-300 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-teal-500 focus:border-transparent transition appearance-none"
              style={{
                backgroundImage:
                  'url(\'data:image/svg+xml;charset=US-ASCII,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" fill="none" stroke="%23666" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>\')',
                backgroundRepeat: "no-repeat",
                backgroundPosition: "right 12px center",
              }}
            >
              <option value="cheap">Budget-Friendly</option>
              <option value="moderate">Moderate</option>
              <option value="expensive">Luxury</option>
            </select>
          </div>
        </div>

<div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-700 flex items-center">
            <span className="mr-2">👥</span> Travel Group
          </h3>
          <div>
            <label className="block text-sm font-medium text-gray-600 mb-1">Traveling With</label>
            <select
              name="travelWith"
              value={form.travelWith}
              onChange={handleChange}
              className="w-full p-3 border border-gray-300 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-teal-500 focus:border-transparent transition appearance-none"
              style={{
                backgroundImage:
                  'url(\'data:image/svg+xml;charset=US-ASCII,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" fill="none" stroke="%23666" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>\')',
                backgroundRepeat: "no-repeat",
                backgroundPosition: "right 12px center",
              }}
            >
              <option value="Just Me">Just Me</option>
              <option value="A Couple">A Couple</option>
              <option value="Family">Family</option>
              <option value="Friends">Friends</option>
            </select>
          </div>

{showNumPeople && (
            <div className="mt-4">
              <label className="block text-sm font-medium text-gray-600 mb-1">Number of People</label>
              <input
                type="number"
                name="numPeople"
                value={form.numPeople}
                onChange={handleChange}
                className="w-full p-3 border border-gray-300 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-teal-500 focus:border-transparent transition"
                placeholder="e.g. 4"
                min="1"
                required
              />
            </div>
          )}
        </div>
      </div>

<button
        type="submit"
        className="bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white font-semibold px-6 py-4 mt-6 rounded-xl shadow-lg transition w-full flex items-center justify-center"
      >
        <span className="mr-2 text-xl">✈️</span>
        <span>Plan My Perfect Trip</span>
      </button>
    </form>
  )
}

export default DestinationInput</article></body></html>