在线巴士票务系统

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [from, setFrom] = useState('');
  const [to, setTo] = useState('');
  const [date, setDate] = useState('');
  const [tickets, setTickets] = useState([]);
  const [selectedTicket, setSelectedTicket] = useState(null);

  const searchTickets = () => {
    // Mock data for demonstration
    const mockTickets = [
      { id: 1, from: 'New York', to: 'Boston', date: '2025-01-01', price: '$20' },
      { id: 2, from: 'New York', to: 'Philadelphia', date: '2025-01-01', price: '$25' },
      { id: 3, from: 'New York', to: 'Washington DC', date: '2025-01-01', price: '$30' },
    ];
    setTickets(mockTickets);
  };

  const selectTicket = (ticket) => {
    setSelectedTicket(ticket);
  };

  const confirmPurchase = () => {
    alert(`You have purchased a ticket from ${selectedTicket.from} to ${selectedTicket.to} on ${selectedTicket.date} for ${selectedTicket.price}`);
    setSelectedTicket(null);
  };

  return (
    <div className="App bg-gray-100 min-h-screen p-8">
      <header className="text-center mb-8">
        <h1 className="text-4xl font-bold text-blue-600">Bus Ticket Search and Purchase System</h1>
      </header>

      <div className="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg mb-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
          <input
            type="text"
            placeholder="From"
            value={from}
            onChange={(e) => setFrom(e.target.value)}
            className="p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
          />
          <input
            type="text"
            placeholder="To"
            value={to}
            onChange={(e) => setTo(e.target.value)}
            className="p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
          />
          <input
            type="date"
            value={date}
            onChange={(e) => setDate(e.target.value)}
            className="p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
          />
        </div>
        <button
          onClick={searchTickets}
          className="w-full bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600"
        >
          Search Tickets
        </button>
      </div>

      {tickets.length > 0 && (
        <div className="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg mb-8">
          <h2 className="text-2xl font-bold mb-4 text-blue-600">Available Tickets</h2>
          <div className="space-y-4">
            {tickets.map((ticket) => (
              <div
                key={ticket.id}
                className="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer"
                onClick={() => selectTicket(ticket)}
              >
                <p className="font-bold">{ticket.from} to {ticket.to}</p>
                <p>Date: {ticket.date}</p>
                <p>Price: {ticket.price}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {selectedTicket && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
          <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
            <h2 className="text-2xl font-bold mb-4 text-blue-600">Confirm Purchase</h2>
            <p className="mb-4">Are you sure you want to purchase the ticket from {selectedTicket.from} to {selectedTicket.to} on {selectedTicket.date} for {selectedTicket.price}?</p>
            <div className="flex justify-end space-x-4">
              <button
                onClick={() => setSelectedTicket(null)}
                className="bg-gray-300 text-gray-700 p-2 rounded-lg hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-600"
              >
                Cancel
              </button>
              <button
                onClick={confirmPurchase}
                className="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600"
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      )}

      <footer className="text-center mt-8 text-gray-600">
        <p>&copy; 2025 Bus Ticket Search and Purchase System. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;