Accueil

import { useState, useEffect } from « react »;
import { Link } from « react-router-dom »;
import { Eye, ShoppingCart, Heart } from « lucide-react »;
import { Product } from « @/types »;
import { useToast } from « @/hooks/use-toast »;

interface ProductCardProps {
product: Product;
index?: number;
}

const ProductCard = ({ product, index = 0 }: ProductCardProps) => {
const [isLoading, setIsLoading] = useState(true);
const [isHovered, setIsHovered] = useState(false);
const { toast } = useToast();

// Simulate loading delay
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 500 + Math.random() * 1000); // Random delay between 500-1500ms

return () => clearTimeout(timer);
}, []);

const handleAddToCart = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();

toast({
title: « Produit ajouté au panier »,
description: `${product.name} a été ajouté à votre panier.`,
});
};

return (
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>

{/* Image loading placeholder */}
{isLoading && (

)}

{/* Product image */}
{product.name} setIsLoading(false)}
/>

{/* Product badges */}
{product.featured && (

Populaire

)}

{/* Quick action buttons */}

Concevoir un site comme celui-ci avec WordPress.com
Commencer