65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import { ExternalLink } from "lucide-react";
|
|
import type { Product } from "@/lib/products";
|
|
import { useLanguage } from "@/context/language-context";
|
|
|
|
interface ProductCardProps {
|
|
product: Product;
|
|
onViewDetails: (slug: string) => void;
|
|
}
|
|
|
|
export function ProductCard({ product, onViewDetails }: ProductCardProps) {
|
|
const {t} = useLanguage();
|
|
return (
|
|
<motion.div
|
|
whileHover={{ y: -8 }}
|
|
className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow"
|
|
>
|
|
{/* Image */}
|
|
<div className="relative h-48 bg-gray-100 overflow-hidden group">
|
|
<Image
|
|
src={product.images[0]}
|
|
alt={product.nameKey}
|
|
fill
|
|
className="object-cover group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-gray-900 mb-2">
|
|
{product.nameKey}
|
|
</h3>
|
|
<p className="text-gray-600 text-sm mb-4">
|
|
{product.shortDescriptionKey}
|
|
</p>
|
|
|
|
{/* Specs Preview */}
|
|
<div className="mb-4 space-y-2">
|
|
{product.specs.slice(0, 2).map((spec, idx) => (
|
|
<div key={idx} className="flex justify-between text-sm">
|
|
<span className="text-gray-600">{spec.key}:</span>
|
|
<span className="font-semibold text-gray-900">{spec.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => onViewDetails(product.slug)}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary/80 text-white rounded-lg font-medium hover:bg-primary transition-colors"
|
|
>
|
|
Batafsil
|
|
<ExternalLink size={16} />
|
|
</motion.button>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|