last push. animatsiya added
This commit is contained in:
@@ -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 ko‘rsatish */}
|
||||
<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️⃣ Ma’lumotlar bloki */}
|
||||
<div className="space-y-3 flex-1">
|
||||
<div className="text-lg font-semibold">
|
||||
<Text txt="Soatlik narx:" />{' '}
|
||||
{detail.price?.toLocaleString('uz-UZ')} so‘m
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user