88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { ArrowRight, CheckCircle2 } from 'lucide-react';
|
|
|
|
interface ProductCardProps {
|
|
product: {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
image: string;
|
|
category: string;
|
|
status: string;
|
|
features?: string[];
|
|
};
|
|
}
|
|
|
|
export function ProductCard({ product }: ProductCardProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{
|
|
duration: 0.65,
|
|
ease: [0.22, 1, 0.36, 1] as const,
|
|
}}
|
|
className="group"
|
|
>
|
|
<Link href={`/products/${product.id}`} className="block">
|
|
<div className="relative h-full rounded-2xl bg-white border border-border-primary overflow-hidden hover:border-brand/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
|
|
<div className="aspect-video relative overflow-hidden bg-bg-secondary">
|
|
<Image
|
|
src={product.image}
|
|
alt={product.title}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
|
|
<div className="absolute top-4 left-4 flex gap-2">
|
|
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-brand text-white shadow-md">
|
|
{product.category}
|
|
</span>
|
|
{product.status === '已发布' && (
|
|
<span className="px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white shadow-md flex items-center gap-1">
|
|
<CheckCircle2 className="w-3 h-3" />
|
|
已发布
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors">
|
|
{product.title}
|
|
</h3>
|
|
|
|
<p className="text-sm text-text-muted leading-relaxed mb-5 line-clamp-2">
|
|
{product.description}
|
|
</p>
|
|
|
|
{product.features && product.features.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mb-5">
|
|
{product.features.slice(0, 3).map((feature) => (
|
|
<span
|
|
key={feature}
|
|
className="px-2.5 py-1 rounded-md text-xs font-medium bg-bg-secondary text-text-muted border border-border-primary"
|
|
>
|
|
{feature}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2 text-sm font-semibold text-brand group-hover:gap-3 transition-all">
|
|
了解详情
|
|
<ArrowRight className="w-4 h-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
}
|