53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { ProductTypes } from "@/types";
|
|
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";
|
|
|
|
export default function ProductCard({ data }: { data: ProductTypes }) {
|
|
const { lang } = useParams();
|
|
|
|
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={{
|
|
scale: 1.05,
|
|
boxShadow: "0px 0px 15px rgba(0,0,0,0.1)",
|
|
}}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
<Link
|
|
href={`/${lang}/${data.path}`}
|
|
className="h-[400px] 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.truck_name}
|
|
width={200}
|
|
height={200}
|
|
className="object-contain max-h-[200px] h-full"
|
|
/>
|
|
</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-gray-800 text-lg text-center">
|
|
<Text txt={data.truck_name} />
|
|
</div>
|
|
<div className="text-secondary text-sm text-center">
|
|
<Text txt={data.desc} />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
}
|