打造终极书店网站

import React from 'react';

const App = () => {
  const categories = [
    {
      name: 'Fiction',
      books: [
        {
          title: 'The Great Gatsby',
          description: 'A classic novel of the Jazz Age.',
          image: 'https://placehold.co/300X400',
          summary: 'The story of the mysteriously wealthy Jay Gatsby and his love for the beautiful Daisy Buchanan.'
        },
        {
          title: '1984',
          description: 'A dystopian novel by George Orwell.',
          image: 'https://placehold.co/300X400',
          summary: 'A chilling portrait of a society under total surveillance.'
        }
      ]
    },
    {
      name: 'Non-Fiction',
      books: [
        {
          title: 'Sapiens',
          description: 'A brief history of humankind.',
          image: 'https://placehold.co/300X400',
          summary: 'Explores how biology and history have defined us and enhanced our understanding of what it means to be human.'
        },
        {
          title: 'The Subtle Art of Not Giving a F*ck',
          description: 'A counterintuitive approach to living a good life.',
          image: 'https://placehold.co/300X400',
          summary: 'A guide to focusing on what truly matters and letting go of the rest.'
        }
      ]
    }
  ];

  const handleWhatsAppClick = (title) => {
    const message = `I am interested in the book: ${title}`;
    const url = `https://wa.me/967772492426?text=${encodeURIComponent(message)}`;
    window.open(url, '_blank');
  };

  return (
    <div className="min-h-screen bg-gray-100 py-8">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-center text-gray-800 mb-8">Bookstore</h1>
        {categories.map((category, index) => (
          <div key={index} className="mb-12">
            <h2 className="text-2xl font-semibold text-gray-700 mb-4">{category.name}</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {category.books.map((book, idx) => (
                <div key={idx} className="bg-white rounded-lg shadow-lg overflow-hidden">
                  <img src={book.image} alt={book.title} className="w-full h-64 object-cover" />
                  <div className="p-6">
                    <h3 className="text-xl font-bold text-gray-800 mb-2">{book.title}</h3>
                    <p className="text-gray-600 mb-4">{book.description}</p>
                    <div className="flex justify-between items-center">
                      <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300">Summary</button>
                      <button onClick={() => handleWhatsAppClick(book.title)} className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-300">Get</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <footer className="text-center py-4 bg-gray-800 text-white">
        <p>© 2025 Bookstore. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;