82 lines
2.6 KiB
TypeScript
82 lines
2.6 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";
|
|
|
|
export default function InnerProductcard({ data }: { data: innerCardTypes }) {
|
|
const route = useParams();
|
|
const { setDetail } = useCarDetail();
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.2 }}
|
|
transition={{ duration: 0.5, ease: "easeOut" }}
|
|
whileHover={{
|
|
scale: 1.05,
|
|
boxShadow: "0px 0px 15px rgba(0,0,0,0.1)",
|
|
}}
|
|
whileTap={{ scale: 0.97 }}
|
|
className="h-[420px] rounded-lg overflow-hidden bg-white transition-all"
|
|
>
|
|
<Link
|
|
href={`/${route.lang}/${route.carType}/${data.name}`}
|
|
onClick={() => setDetail(data)}
|
|
className="h-full flex flex-col items-center justify-between rounded-lg hover:cursor-pointer"
|
|
>
|
|
{/* Rasm qismi */}
|
|
<div className="rounded-t-lg bg-white">
|
|
<Image
|
|
src={data.image}
|
|
alt={data.name}
|
|
width={0}
|
|
height={200}
|
|
className="object-fill w-full max-h-[200px] h-full rounded-t-sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* Pastki qism */}
|
|
<div className="bg-[#fafafa] w-full p-2 px-4 rounded-b-lg flex flex-col items-start justify-start gap-2">
|
|
<div className="text-xl font-semibold">
|
|
<Text txt={data.name} />
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Text txt="hour-price" />
|
|
{data.price?.toLocaleString("uz-UZ")}
|
|
<Text txt="wallet" />
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Text txt="min-time" />
|
|
{data.min_order_time}
|
|
<Text txt="time" />
|
|
</div>
|
|
|
|
{/* Tugma animatsiyasi */}
|
|
<motion.button
|
|
whileHover={{
|
|
scale: 1.05,
|
|
backgroundColor: "#ffffff",
|
|
color: "#dc2626", // hoverda text-secondary (agar sizda secondary = red)
|
|
borderColor: "#dc2626",
|
|
}}
|
|
whileTap={{ scale: 0.95 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="w-full p-3 bg-secondary rounded-lg text-white border-2 border-secondary"
|
|
>
|
|
<Text txt="more" />
|
|
</motion.button>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
}
|