59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
// src/components/ui/ProductCard.tsx
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Plus } from "lucide-react";
|
|
|
|
interface ProductCardProps {
|
|
id: string;
|
|
title: string;
|
|
category: string;
|
|
price: number;
|
|
imageUrl: string;
|
|
index?: number; // Para escalonar animaciones si queremos
|
|
}
|
|
|
|
export default function ProductCard({ id, title, category, price, imageUrl, index = 1 }: ProductCardProps) {
|
|
return (
|
|
<Link href={`/product/${id}`} className="group block cursor-pointer">
|
|
{/* Contenedor de Imagen (Gris pálido, bordes muy redondos) */}
|
|
<div className="bg-light rounded-[2rem] aspect-[3/4] flex items-center justify-center mb-5 relative overflow-hidden transition-colors duration-300 group-hover:bg-[#f0f0f0]">
|
|
|
|
{/* Número de índice estilo editorial */}
|
|
<span className="absolute top-6 left-6 text-xs font-medium text-gray-300 tracking-widest z-20">
|
|
{index.toString().padStart(2, '0')}
|
|
</span>
|
|
|
|
{/* Botón flotante "Quick Add" (aparece en hover) */}
|
|
<button className="absolute bottom-6 right-6 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm translate-y-20 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 z-20 hover:bg-accent hover:text-white">
|
|
<Plus className="w-5 h-5" />
|
|
</button>
|
|
|
|
{/* Imagen del Producto */}
|
|
<div className="relative w-3/4 h-3/4 transition-transform duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-110">
|
|
<img
|
|
src={imageUrl}
|
|
alt={title}
|
|
className="w-full h-full object-contain drop-shadow-md group-hover:drop-shadow-xl transition-all duration-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Información del Producto */}
|
|
<div className="flex justify-between items-start px-2">
|
|
<div>
|
|
<h3 className="text-lg font-medium text-dark leading-tight group-hover:text-accent transition-colors">
|
|
{title}
|
|
</h3>
|
|
<p className="text-xs text-gray-400 uppercase tracking-wider mt-1 font-medium">
|
|
{category}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-dark font-medium block">
|
|
{new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(price)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
} |