تطبيق متجر القادسية الذكي

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

const App = () => {
  const [products, setProducts] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [cart, setCart] = useState([]);

  useEffect(() => {
    // Fetch products from API
    fetch('/api/products')
      .then(response => response.json())
      .then(data => setProducts(data));
  }, []);

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  const handleCategoryChange = (event) => {
    setSelectedCategory(event.target.value);
  };

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const removeFromCart = (productId) => {
    setCart(cart.filter(item => item.id !== productId));
  };

  const filteredProducts = products.filter(product => {
    return (selectedCategory === 'all' || product.category === selectedCategory) &&
      (product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        product.description.toLowerCase().includes(searchTerm.toLowerCase()));
  });

  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Al-Qadisiyah Store</h1>
        <div className="mt-2">
          <input
            type="text"
            placeholder="Search products..."
            className="p-2 rounded text-black"
            value={searchTerm}
            onChange={handleSearch}
          />
          <select
            className="ml-2 p-2 rounded text-black"
            value={selectedCategory}
            onChange={handleCategoryChange}
          >
            <option value="all">All Categories</option>
            <option value="electronics">Electronics</option>
            <option value="clothing">Clothing</option>
            <option value="home">Home</option>
          </select>
        </div>
      </header>

      <main className="p-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {filteredProducts.map(product => (
            <div key={product.id} className="border p-4 rounded-lg shadow-lg">
              <img src={product.image} alt={product.name} className="w-full h-48 object-cover rounded-lg" />
              <h2 className="text-xl font-semibold mt-2">{product.name}</h2>
              <p className="text-gray-600">{product.description}</p>
              <p className="text-lg font-bold mt-2">${product.price}</p>
              <button
                className="bg-blue-600 text-white px-4 py-2 rounded mt-2"
                onClick={() => addToCart(product)}
              >
                Add to Cart
              </button>
            </div>
          ))}
        </div>
      </main>

      <aside className="bg-gray-100 p-4">
        <h2 className="text-xl font-bold">Shopping Cart</h2>
        {cart.map(item => (
          <div key={item.id} className="flex justify-between items-center mt-2">
            <span>{item.name}</span>
            <button
              className="bg-red-600 text-white px-2 py-1 rounded"
              onClick={() => removeFromCart(item.id)}
            >
              Remove
            </button>
          </div>
        ))}
        <p className="mt-4 font-bold">Total: ${cart.reduce((sum, item) => sum + item.price, 0)}</p>
      </aside>

      <footer className="bg-blue-600 text-white p-4 mt-4">
        <p>© 2025 Al-Qadisiyah Store. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;