66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Text from "../lib_components/text";
|
|
import { useParams } from "next/navigation";
|
|
import { motion } from "framer-motion";
|
|
import { useSubCategory } from "@/store/subCategory";
|
|
|
|
export default function ProductCard({ data }: { data: any }) {
|
|
const { lang } = useParams();
|
|
const setInitialSubcategory = useSubCategory(
|
|
(state) => state.setInitialSubCategory,
|
|
);
|
|
const carData = {
|
|
name: data?.name,
|
|
id: data?.id,
|
|
};
|
|
|
|
console.log("data: ", data);
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.2 }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
whileHover={{
|
|
boxShadow: "0px 0px 15px rgba(0,0,0,0.8)",
|
|
}}
|
|
whileTap={{ scale: 0.98 }}
|
|
className="rounded-xl border-2 border-primary h-[430px]"
|
|
>
|
|
<Link
|
|
href={`/${lang}/${data.name}`}
|
|
onClick={() => setInitialSubcategory(carData)}
|
|
className="h-full flex flex-col items-center justify-between rounded-lg bg-white transition-transform"
|
|
>
|
|
{/* Yuqori qism - rasm */}
|
|
<div className="rounded-t-lg bg-white py-10 px-2 flex justify-center items-center">
|
|
<Image
|
|
src={data.image}
|
|
alt={data.name}
|
|
width={260}
|
|
height={200}
|
|
className="object-contain max-h-[200px] h-full rounded-xl"
|
|
/>
|
|
</div>
|
|
|
|
{/* Pastki qism - matn */}
|
|
<div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center space-y-1">
|
|
<div className="font-medium text-primary text-xl text-center">
|
|
<Text txt={data.name} />
|
|
</div>
|
|
<div className="text-secondary text-md font-extrabold text-center">
|
|
<Text txt="agreement" />
|
|
</div>
|
|
<div className="text-center text-secondary bg-primary max-w-[200px] w-full rounded-xl text-lg py-2 hover:cursor-pointer">
|
|
<Text txt="more" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
}
|