مشروع متجر القادسية

import React, { useState, useEffect } from 'react';

const App = () => {
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [cart, setCart] = useState([]);
  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    // Fetch products and categories from API
    fetch('/api/products')
      .then(response => response.json())
      .then(data => setProducts(data));

    fetch('/api/categories')
      .then(response => response.json())
      .then(data => setCategories(data));
  }, []);

  const handleSearch = (event) => {
    setSearchQuery(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 toggleAdmin = () => {
    setIsAdmin(!isAdmin);
  };

  const filteredProducts = products.filter(product => {
    return (selectedCategory ? product.category === selectedCategory : true) &&
           (searchQuery ? product.name.toLowerCase().includes(searchQuery.toLowerCase()) : true);
  });

  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Al-Qadisiyah Store</h1>
        <button onClick={toggleAdmin} className="mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          {isAdmin ? 'Switch to User Mode' : 'Switch to Admin Mode'}
        </button>
      </header>

      {isAdmin ? (
        <div className="p-4">
          <h2 className="text-xl font-bold mb-4">Admin Panel</h2>
          <form className="mb-4">
            <input type="text" placeholder="Product Name" className="border p-2 mr-2" />
            <input type="number" placeholder="Price" className="border p-2 mr-2" />
            <button type="button" className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
              Extract Image with AI
            </button>
            <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
              Add Product
            </button>
          </form>
        </div>
      ) : (
        <div className="p-4">
          <div className="mb-4">
            <input type="text" placeholder="Search products..." onChange={handleSearch} className="border p-2 w-full" />
          </div>
          <div className="mb-4">
            <select onChange={handleCategoryChange} className="border p-2 w-full">
              <option value="">All Categories</option>
              {categories.map(category => (
                <option key={category} value={category}>{category}</option>
              ))}
            </select>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {filteredProducts.map(product => (
              <div key={product.id} className="border p-4">
                <img src={product.image} alt={product.name} className="w-full h-48 object-cover" />
                <h3 className="text-lg font-bold mt-2">{product.name}</h3>
                <p className="text-gray-700">{product.description}</p>
                <p className="text-green-600 font-bold">${product.price}</p>
                <button onClick={() => addToCart(product)} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">
                  Add to Cart
                </button>
              </div>
            ))}
          </div>
          <div className="mt-8">
            <h2 className="text-xl font-bold mb-4">Shopping Cart</h2>
            {cart.map(item => (
              <div key={item.id} className="border p-4 mb-2">
                <h3 className="text-lg font-bold">{item.name}</h3>
                <p className="text-gray-700">${item.price}</p>
                <button onClick={() => removeFromCart(item.id)} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-2">
                  Remove
                </button>
              </div>
            ))}
            <p className="text-xl font-bold">Total: ${cart.reduce((sum, item) => sum + item.price, 0)}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;