last push. animatsiya added

This commit is contained in:
nabijonovdavronbek619@gmail.com
2025-11-07 22:52:50 +05:00
parent 45f5e2251b
commit 549535b471
8 changed files with 255 additions and 88 deletions

View File

@@ -1,9 +1,10 @@
'use client';
"use client";
import { useCarDetail } from '@/components/lib_components/carDetailProvider';
import Text from '@/components/lib_components/text';
import Image from 'next/image';
import React from 'react';
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";
export default function CarDetailPage() {
const { detail } = useCarDetail();
@@ -18,33 +19,68 @@ export default function CarDetailPage() {
}
return (
<div dir="ltr" className="my-10 max-w-[1200px] w-full mx-auto space-y-5">
<div
dir="ltr"
className="my-10 max-w-[1200px] w-full mx-auto space-y-5 flex flex-col items-start justify-center "
>
{/* 2⃣ Mahsulot nomi */}
<div className="text-2xl font-bold w-full text-center text-secondary mb-10">
<Text txt={detail.name} />
</div>
<div className="flex flex-col md:flex-row items-start gap-6 justify-between">
<div className="flex flex-col md:flex-row items-start gap-6 justify-center w-full">
{/* 3⃣ Rasmini korsatish */}
<div className="flex-shrink-0">
<div className="w-[400px] h-auto">
<Image
src={detail.image}
alt={detail.name}
width={400}
height={300}
className="rounded-lg object-cover border border-gray-200"
width={600}
height={200}
className="rounded-lg object-cover border border-gray-200 w-full"
/>
</div>
{/* 4⃣ Malumotlar bloki */}
<div className="space-y-3 flex-1">
<div className="text-lg font-semibold">
<Text txt="Soatlik narx:" />{' '}
{detail.price?.toLocaleString('uz-UZ')} som
<div className="space-y-3 ">
<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">
<Text txt="Minimal ijaraga olish vaqti:" /> {detail.min_order_time}{' '}
<Text txt="soat" />
<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" />{" "}
<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 ">
<Text txt="note1" />
<Text txt="note2" />
</div>
<div className="flex gap-6">
<button className="
bg-secondary p-3 px-6 rounded-lg border-2 border-secondary text-white
hover:cursor-pointer hover:bg-white hover:text-secondary
">
<Text txt="book" />
</button>
<button 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" />
</button>
</div>
</div>
</div>