Revolutionize Your Book Publishing with Our Beautiful App

import React, { useState } from 'react';

const App = () => {
  const [user, setUser] = useState(null);
  const [books, setBooks] = useState([]);
  const [selectedBook, setSelectedBook] = useState(null);
  const [paymentInfo, setPaymentInfo] = useState({ cardNumber: '', expiryDate: '', cvv: '' });

  const handleLogin = (e) => {
    e.preventDefault();
    setUser({ name: 'John Doe', email: '[email protected]' });
  };

  const handleAddBook = (e) => {
    e.preventDefault();
    const newBook = { id: books.length + 1, title: 'New Book', price: 20 };
    setBooks([...books, newBook]);
  };

  const handlePurchase = (e) => {
    e.preventDefault();
    alert('Purchase completed!');
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Book Publishing App</h1>
      </header>

      <main className="p-4">
        {!user ? (
          <form onSubmit={handleLogin} className="bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-xl font-semibold mb-4">Login</h2>
            <input type="email" placeholder="Email" className="w-full p-2 mb-4 border rounded" required />
            <input type="password" placeholder="Password" className="w-full p-2 mb-4 border rounded" required />
            <button type="submit" className="w-full bg-blue-600 text-white p-2 rounded">Login</button>
          </form>
        ) : (
          <div>
            <div className="bg-white p-6 rounded-lg shadow-md mb-4">
              <h2 className="text-xl font-semibold mb-4">Add a Book</h2>
              <form onSubmit={handleAddBook}>
                <input type="text" placeholder="Book Title" className="w-full p-2 mb-4 border rounded" required />
                <input type="number" placeholder="Price" className="w-full p-2 mb-4 border rounded" required />
                <button type="submit" className="w-full bg-blue-600 text-white p-2 rounded">Add Book</button>
              </form>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-md mb-4">
              <h2 className="text-xl font-semibold mb-4">Books Available</h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {books.map((book) => (
                  <div key={book.id} className="border p-4 rounded-lg">
                    <h3 className="text-lg font-semibold">{book.title}</h3>
                    <p className="text-gray-600">${book.price}</p>
                    <button onClick={() => setSelectedBook(book)} className="mt-2 bg-blue-600 text-white p-2 rounded w-full">Purchase</button>
                  </div>
                ))}
              </div>
            </div>

            {selectedBook && (
              <div className="bg-white p-6 rounded-lg shadow-md">
                <h2 className="text-xl font-semibold mb-4">Purchase {selectedBook.title}</h2>
                <form onSubmit={handlePurchase}>
                  <input type="text" placeholder="Card Number" className="w-full p-2 mb-4 border rounded" required />
                  <input type="text" placeholder="Expiry Date" className="w-full p-2 mb-4 border rounded" required />
                  <input type="text" placeholder="CVV" className="w-full p-2 mb-4 border rounded" required />
                  <button type="submit" className="w-full bg-blue-600 text-white p-2 rounded">Complete Purchase</button>
                </form>
              </div>
            )}
          </div>
        )}
      </main>

      <footer className="bg-gray-800 text-white p-4 mt-8">
        <p className="text-center">© 2025 Book Publishing App. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;