51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce";
|
|
|
|
interface ProductCardProps {
|
|
product: WooProduct;
|
|
index?: number;
|
|
}
|
|
|
|
export default function ProductCard({ product, index = 0 }: ProductCardProps) {
|
|
const image = getProductImage(product);
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
>
|
|
<Link href={`/products/${product.slug}`} className="group block">
|
|
<div className="relative aspect-[4/5] bg-background-ice overflow-hidden mb-4">
|
|
{image && (
|
|
<Image
|
|
src={image}
|
|
alt={product.name}
|
|
fill
|
|
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
)}
|
|
{product.stock_status === "outofstock" && (
|
|
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
|
|
<span className="text-white font-medium">Out of Stock</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<h3 className="font-serif text-lg mb-1 group-hover:text-accent-dark transition-colors">
|
|
{product.name}
|
|
</h3>
|
|
|
|
<p className="text-foreground-muted">
|
|
{product.price ? formatPrice(product.price) : "Contact for price"}
|
|
</p>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
}
|