Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modal and send rent info to telegram bot

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2025-11-08 18:25:40 +05:00
parent a6c85adaca
commit 5d27a3e8fa
6 changed files with 1159 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/[lang]/[carType]/[carDeatil]/page.tsx
View File

@@ -3,13 +3,14 @@
import { useCarDetail } from "@/components/lib_components/carDetailProvider";
import Text from "@/components/lib_components/text";
import Image from "next/image";
import React from "react";
import { Send } from "lucide-react";
import React, { useState } from "react";
import CarRentalModal from "@/components/lib_components/carRentalModal";
import { useTranslation } from "react-i18next";
export default function CarDetailPage() {
const { detail } = useCarDetail();
const [modalOpen, setModalOpen] = useState<boolean>(false);
// 1️⃣ Null holatni boshqarish
if (!detail) {
return (
<div className="my-20 text-center text-gray-500">
@@ -18,72 +19,119 @@ export default function CarDetailPage() {
);
}
const {t} = useTranslation();
const techSpecs: Record<string, string | number | undefined> = {
[t("weight_kg")]: detail.weight_kg && `${detail.weight_kg.toLocaleString("uz-UZ")} kg`,
[t("maxLength_m")]: detail.maxLength_m && `${detail.maxLength_m} m`,
[t("maxHeight_m")]: detail.maxHeight_m && `${detail.maxHeight_m} m`,
[t("capacity_tons")]: detail.capacity_tons && `${detail.capacity_tons} t`,
[t("capacity_kg")]: detail.capacity_kg && `${detail.capacity_kg} kg`,
[t("fuelType")]: detail.fuelType,
[t("tankVolume_m3")]: detail.tankVolume_m3 && `${detail.tankVolume_m3} m³`,
[t("maxSpeed_kmh")]: detail.maxSpeed_kmh && `${detail.maxSpeed_kmh} km/soat`,
[t("intercooler")]: detail.intercooler,
[t("enginePower_hp")]: detail.enginePower_hp,
[t("transmission")]: detail.transmission,
[t("bom")]: detail.bom && `${detail.bom} m`,
[t("qazish")]: detail.qazish && `${detail.qazish} m`,
[t("pichoq")]: detail.pichoq && `${detail.pichoq} m`,
[t("zichlash")]: detail.zichlash && `${detail.zichlash} m`,
[t("siqish")]: detail.siqish && `${detail.siqish} bar`,
[t("havo")]: detail.havo && `${detail.havo} l`,
[t("kompressor_sig")]: detail.kompressor_sig && `${detail.kompressor_sig} l`
};
return (
<div
dir="ltr"
className="my-10 max-w-[1200px] w-full mx-auto space-y-5 flex flex-col items-start justify-center "
className="my-10 max-w-[1200px] w-full mx-auto space-y-8 flex flex-col items-start justify-center"
>
{/* 2️⃣ Mahsulot nomi */}
{/* 1️⃣ Mashina nomi */}
<div className="text-2xl font-bold w-full text-center text-secondary mb-10">
<Text txt={detail.name} />
</div>
{/* 2️⃣ Rasmi + asosiy narx ma’lumotlari */}
<div className="flex flex-col md:flex-row items-start gap-6 justify-center w-full">
{/* 3️⃣ Rasmini ko‘rsatish */}
{/* Mashina rasmi */}
<div className="w-[400px] h-auto">
<Image
src={detail.image}
alt={detail.name}
width={600}
height={200}
className="rounded-lg object-cover border border-gray-200 w-full"
className="rounded-lg object-cover border border-gray-200 w-full"
/>
</div>
{/* 4️⃣ Ma’lumotlar bloki */}
<div className="space-y-3 ">
<div className="text-lg font-semibold flex gap-2 ">
{/* Asosiy ma’lumotlar */}
<div className="space-y-3 w-full">
<div className="text-lg font-semibold flex gap-2">
<Text txt="hour-price" />
<span className="font-medium flex gap-2 text-gray-500">
{detail.price?.toLocaleString("uz-UZ")}
<Text txt="wallet" />
</span>
</div>
<div className="text-lg font-semibold flex gap-2">
<div className="text-lg font-semibold flex gap-2">
<Text txt="min-time" />
<span className="font-medium flex gap-2 text-gray-500">
{detail.min_order_time}
<Text txt="time" />
</span>
</div>
<div className="text-lg font-semibold flex gap-2">
<Text txt="day-price" />{" "}
<div className="text-lg font-semibold flex gap-2">
<Text txt="day-price" />
<span className="font-medium flex gap-2 text-gray-500">
{detail.price && (detail.price * 8).toLocaleString("uz-UZ")}
<Text txt="wallet" />
</span>
</div>
<div className="space-y-2 text-gray-500 text-lg ">
{/* Izoh */}
<div className="space-y-2 text-gray-500 text-lg">
<Text txt="note1" />
<Text txt="note2" />
</div>
{/* Buyurtma tugmasi */}
<div className="flex gap-6">
<a href="tel:+998917412920" className="
bg-secondary p-3 px-6 rounded-lg border-2 border-secondary text-white
hover:cursor-pointer hover:bg-white hover:text-secondary
">
<button
onClick={() => setModalOpen(true)}
className="bg-secondary p-3 px-6 rounded-lg border-2 border-secondary text-white
hover:cursor-pointer hover:bg-white hover:text-secondary transition-all"
>
<Text txt="book" />
</a>
<a href="https://t.me/@ndx_09" className="
flex gap-4 p-3 rounded-lg border-2 border-sky-500 text-sky-500
hover:cursor-pointer hover:text-black hover:border-black
">
<Send className="w-6 h-6" />
<Text txt="ask" />
</a>
</button>
</div>
</div>
</div>
{/* 3️⃣ Texnik xususiyatlar (faqat mavjudlari) */}
<div className="w-full border-t border-gray-300 pt-6">
<h2 className="text-xl font-semibold mb-4 text-secondary">Texnik xususiyatlari</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-700">
{Object.entries(techSpecs)
.filter(([_, value]) => value !== undefined)
.map(([key, value]) => (
<div
key={key}
className="p-3 rounded-md bg-gray-50 border border-gray-200 hover:bg-gray-100 transition"
>
<p className="font-medium">{key}:</p>
<p className="text-gray-600">{value}</p>
</div>
))}
</div>
</div>
{/* 4️⃣ Ijara modal */}
<CarRentalModal
car={detail}
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
/>
</div>
);
}