Untitled
unknown
plain_text
18 days ago
7.0 kB
1
Indexable
Never
import React, { useState } from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; import { ChevronDown, Search, Calendar, MapPin, Users, Settings } from 'lucide-react'; // Placeholder for API calls const api = { searchFlights: async (from, to, date) => { // Simulated API call return [ { id: 1, airline: 'KonenAir', price: 299, departure: '10:00', arrival: '12:00' }, { id: 2, airline: 'SkyHigh', price: 349, departure: '14:00', arrival: '16:00' }, ]; }, getDestinations: async (date, budget) => { // Simulated API call return [ { id: 1, name: 'Paris', price: 450 }, { id: 2, name: 'Tokyo', price: 800 }, { id: 3, name: 'New York', price: 600 }, ]; }, }; // Header Component const Header = () => ( <header className="bg-blue-600 text-white p-4"> <div className="container mx-auto flex justify-between items-center"> <h1 className="text-2xl font-bold">KONEN</h1> <nav> <Link to="/" className="mx-2">Home</Link> <Link to="/flights" className="mx-2">Flights</Link> <Link to="/planner" className="mx-2">Vacation Planner</Link> <Link to="/community" className="mx-2">Community</Link> <Link to="/profile" className="mx-2">Profile</Link> </nav> </div> </header> ); // Footer Component const Footer = () => ( <footer className="bg-gray-200 p-4 mt-8"> <div className="container mx-auto text-center"> <p>© 2024 KONEN Travel Platform</p> </div> </footer> ); // Home Component const Home = () => ( <div className="container mx-auto mt-8"> <h1 className="text-4xl font-bold mb-4">Welcome to KONEN</h1> <p className="mb-4">Discover the best travel deals and plan your next adventure!</p> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <Link to="/flights" className="bg-blue-500 text-white p-4 rounded">Search Flights</Link> <Link to="/planner" className="bg-green-500 text-white p-4 rounded">Plan a Vacation</Link> </div> </div> ); // Flight Search Component const FlightSearch = () => { const [flights, setFlights] = useState([]); const [from, setFrom] = useState(''); const [to, setTo] = useState(''); const [date, setDate] = useState(''); const handleSearch = async (e) => { e.preventDefault(); const results = await api.searchFlights(from, to, date); setFlights(results); }; return ( <div className="container mx-auto mt-8"> <h2 className="text-2xl font-bold mb-4">Find Cheap Flights</h2> <form onSubmit={handleSearch} className="mb-8"> <div className="flex flex-wrap -mx-2 mb-4"> <div className="w-full md:w-1/4 px-2 mb-4"> <input type="text" placeholder="From" value={from} onChange={(e) => setFrom(e.target.value)} className="w-full p-2 border rounded" /> </div> <div className="w-full md:w-1/4 px-2 mb-4"> <input type="text" placeholder="To" value={to} onChange={(e) => setTo(e.target.value)} className="w-full p-2 border rounded" /> </div> <div className="w-full md:w-1/4 px-2 mb-4"> <input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="w-full p-2 border rounded" /> </div> <div className="w-full md:w-1/4 px-2 mb-4"> <button type="submit" className="w-full bg-blue-500 text-white p-2 rounded"> Search Flights </button> </div> </div> </form> <div> {flights.map((flight) => ( <div key={flight.id} className="bg-white p-4 mb-4 rounded shadow"> <h3 className="font-bold">{flight.airline}</h3> <p>Price: ${flight.price}</p> <p>Departure: {flight.departure} - Arrival: {flight.arrival}</p> </div> ))} </div> </div> ); }; // Vacation Planner Component const VacationPlanner = () => { const [destinations, setDestinations] = useState([]); const [budget, setBudget] = useState(''); const [date, setDate] = useState(''); const handleSearch = async (e) => { e.preventDefault(); const results = await api.getDestinations(date, budget); setDestinations(results); }; return ( <div className="container mx-auto mt-8"> <h2 className="text-2xl font-bold mb-4">Plan Your Vacation</h2> <form onSubmit={handleSearch} className="mb-8"> <div className="flex flex-wrap -mx-2 mb-4"> <div className="w-full md:w-1/3 px-2 mb-4"> <input type="number" placeholder="Budget" value={budget} onChange={(e) => setBudget(e.target.value)} className="w-full p-2 border rounded" /> </div> <div className="w-full md:w-1/3 px-2 mb-4"> <input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="w-full p-2 border rounded" /> </div> <div className="w-full md:w-1/3 px-2 mb-4"> <button type="submit" className="w-full bg-green-500 text-white p-2 rounded"> Find Destinations </button> </div> </div> </form> <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> {destinations.map((dest) => ( <div key={dest.id} className="bg-white p-4 rounded shadow"> <h3 className="font-bold">{dest.name}</h3> <p>Estimated Cost: ${dest.price}</p> <button className="mt-2 bg-blue-500 text-white p-2 rounded">View Details</button> </div> ))} </div> </div> ); }; // Placeholder components for other sections const CommunityFeed = () => <h2 className="text-2xl font-bold">Community Feed</h2>; const UserProfile = () => <h2 className="text-2xl font-bold">User Profile</h2>; // Main App Component const App = () => { return ( <Router> <div className="flex flex-col min-h-screen"> <Header /> <main className="flex-grow"> <Switch> <Route exact path="/" component={Home} /> <Route path="/flights" component={FlightSearch} /> <Route path="/planner" component={VacationPlanner} /> <Route path="/community" component={CommunityFeed} /> <Route path="/profile" component={UserProfile} /> </Switch> </main> <Footer /> </div> </Router> ); }; export default App;
Leave a Comment