61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { useSubCategory } from "@/zustand/useSubCategory";
|
|
import { useLocale } from "next-intl";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface ProductCardProps {
|
|
id: number;
|
|
category: number;
|
|
title: string;
|
|
image: string;
|
|
slug: string;
|
|
}
|
|
|
|
export default function Card({
|
|
title,
|
|
image,
|
|
slug,
|
|
id,
|
|
category,
|
|
}: ProductCardProps) {
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const setSubCategory = useSubCategory((state) => state.setSubCategory);
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
|
|
setSubCategory({
|
|
id,
|
|
name: title,
|
|
image,
|
|
category,
|
|
});
|
|
router.push(`/${locale}/catalog_page/products`);
|
|
};
|
|
return (
|
|
<Link href="#" onClick={handleClick}>
|
|
<article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
|
|
{/* Image Container */}
|
|
<div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">
|
|
<Image
|
|
src={image || "/placeholder.svg"}
|
|
alt={title}
|
|
fill
|
|
className="object-contain transition-transform duration-300 group-hover:scale-105"
|
|
sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
|
|
/>
|
|
</div>
|
|
|
|
{/* Content Container */}
|
|
<div className="p-6 sm:p-4">
|
|
<h3 className="text-lg text-center font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
);
|
|
}
|