54 lines
1.8 KiB
TypeScript
54 lines
1.8 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 { motion } from "framer-motion";
|
|
import { useParams } from "next/navigation";
|
|
|
|
export default function SliderCard({ data }: { data: ProductTypes }) {
|
|
const router = useParams();
|
|
return (
|
|
<Link
|
|
href={`/${router.lang}/${data.path}`}
|
|
id="news_slider_card"
|
|
className="group hover:cursor-pointer block"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: "easeOut" }}
|
|
whileTap={{ scale: 0.98 }}
|
|
className="rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all"
|
|
>
|
|
{/* Rasm qismi */}
|
|
<Image
|
|
src={data.image}
|
|
alt="slider image"
|
|
width={600}
|
|
height={600}
|
|
className="object-cover max-w-[600px] w-full h-[300px]"
|
|
/>
|
|
|
|
{/* Pastki kontent */}
|
|
<div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
|
|
{/* Yuqoridagi belgi */}
|
|
<motion.div
|
|
className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid"
|
|
whileHover={{ scale: 1.05 }}
|
|
transition={{ type: "spring", stiffness: 200 }}
|
|
>
|
|
<Text txt={data.truck_name} />
|
|
</motion.div>
|
|
|
|
{/* Tavsif matni */}
|
|
<div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary transition-colors">
|
|
<Text txt={data.desc} />
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
);
|
|
}
|