139 lines
4.7 KiB
TypeScript
139 lines
4.7 KiB
TypeScript
"use client";
|
|
import { innerCardTypes } from "@/types";
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import Text from "../lib_components/text";
|
|
import { useCarDetail } from "../lib_components/carDetailProvider";
|
|
import { motion } from "framer-motion";
|
|
import { useCarType } from "@/store/carType";
|
|
|
|
export default function InnerProductcard({ data }: { data: any }) {
|
|
const route = useParams();
|
|
const { setDetail } = useCarDetail();
|
|
const setInitialCar = useCarType((state) => state.setInitialCar);
|
|
|
|
const carInfo = {
|
|
id: data?.id,
|
|
name: data?.name,
|
|
};
|
|
|
|
return (
|
|
<Link
|
|
href={`/${route.lang}/${route.carType}/${data.name}`}
|
|
onClick={() => {
|
|
setDetail(data);
|
|
setInitialCar(carInfo);
|
|
}}
|
|
className="block h-full"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.2 }}
|
|
transition={{ duration: 0.5, ease: "easeOut" }}
|
|
className="h-full group"
|
|
>
|
|
<div
|
|
className="h-full bg-white rounded-2xl overflow-hidden border-2 border-gray-100
|
|
hover:border-[#f2a01c] transition-all duration-300
|
|
shadow-sm hover:shadow-xl flex flex-col"
|
|
>
|
|
{/* Rasm container - katta va responsive */}
|
|
<div
|
|
className="relative w-full aspect-[4/3] bg-gradient-to-br from-gray-50 via-white to-gray-50
|
|
overflow-hidden group-hover:bg-gradient-to-br group-hover:from-orange-50
|
|
group-hover:via-white group-hover:to-orange-50 transition-all duration-500"
|
|
>
|
|
{/* Rasm */}
|
|
<div className="absolute inset-0 p-6 flex items-center justify-center">
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="relative w-full h-full"
|
|
>
|
|
<Image
|
|
src={data.image}
|
|
alt={data.name}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
className="object-contain"
|
|
priority
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Dekorativ element */}
|
|
<div
|
|
className="absolute top-4 right-4 w-12 h-12 bg-[#f2a01c]/10 rounded-full
|
|
flex items-center justify-center opacity-0 group-hover:opacity-100
|
|
transition-opacity duration-300"
|
|
>
|
|
<svg
|
|
className="w-6 h-6 text-[#f2a01c]"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content qismi */}
|
|
<div className="flex-1 p-6 flex flex-col justify-between bg-white">
|
|
{/* Nomi va tavsif */}
|
|
<div className="mb-4">
|
|
<h3
|
|
className="text-xl font-bold text-[#0c1239] mb-2 line-clamp-2
|
|
group-hover:text-[#f2a01c] transition-colors duration-300"
|
|
>
|
|
<Text txt={data.name} />
|
|
</h3>
|
|
|
|
{/* Agar qo'shimcha ma'lumot bo'lsa */}
|
|
{data.description && (
|
|
<p className="text-sm text-gray-600 line-clamp-2">
|
|
<Text txt={data.description} />
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tugma - past qismda */}
|
|
<div className="pt-4 border-t border-gray-100">
|
|
<motion.div
|
|
whileHover={{ x: 4 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="flex items-center justify-between text-[#f2a01c] font-semibold"
|
|
>
|
|
<span>
|
|
<Text txt="more" />
|
|
</span>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
);
|
|
}
|