فروشگاه آنلاین مدرن

// نمونه کد برای صفحه محصول
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addToCart } from '@/redux/cartSlice';
import { useQuery } from 'react-query';
import { getProduct } from '@/lib/api';

export default function ProductPage({ params }) {
  const { id } = params;
  const [quantity, setQuantity] = useState(1);
  const dispatch = useDispatch();
  
  const { data: product, isLoading, error } = useQuery(['product', id], () => getProduct(id));
  
  if (isLoading) return <div>در حال بارگذاری...</div>;
  if (error) return <div>خطا در بارگذاری محصول</div>;
  
  const handleAddToCart = () => {
    dispatch(addToCart({
      id: product._id,
      name: product.name,
      price: product.price,
      image: product.images[0],
      quantity
    }));
  };
  
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="relative h-96">
          <img src={product.images[0] || "/placeholder.svg"} alt={product.name} className="object-cover rounded-lg" />
        </div>
        <div>
          <h1 className="text-3xl font-bold mb-4">{product.name}</h1>
          <p className="text-2xl text-blue-600 mb-4">{product.price.toLocaleString()} تومان</p>
          <p className="mb-6">{product.description}</p>
          <div className="flex items-center mb-6">
            <button 
              onClick={() => setQuantity(q => Math.max(1, q - 1))}
              className="px-3 py-1 border border-gray-300 rounded-l-md"
            >
              -
            </button>
            <span className="px-4 py-1 border-t border-b border-gray-300">{quantity}</span>
            <button 
              onClick={() => setQuantity(q => q + 1)}
              className="px-3 py-1 border border-gray-300 rounded-r-md"
            >
              +
            </button>
          </div>
          <button 
            onClick={handleAddToCart}
            className="w-full bg-blue-600 text-white py-3 rounded-md hover:bg-blue-700"
          >
            افزودن به سبد خرید
          </button>
        </div>
      </div>
    </div>
  );
}