carType page over

app/[lang]/[carType]/[carDeatil]/layout.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div>
+      {children}
+    </div>
+  );
+}

app/[lang]/[carType]/[carDeatil]/page.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { useCarDetail } from '@/components/lib_components/carDetailProvider'
+import React from 'react'
+
+export default function page() {
+    const {detail} = useCarDetail();
+  return (
+    <div>
+      {detail?.name}
+    </div>
+  )
+}

app/[lang]/[carType]/page.tsx

@@ -1,13 +1,120 @@
 "use client";
 
-import Title from "@/components/title";
+import InnerProductcard from "@/components/cards/innerProductcard";
+import Title from "@/components/lib_components/title";
+import { avtogreyderlar, avtokran, avtominora, buldozerlar, cement_trucks, dizel, dumb_trucks, eks_yuklagichlar, forkliftlar, gazels, gildirakli_eks, katkalar, kompressorlar, mini_eks, minora, old_yuklagichlar, paletli_eks, paletli_kranlar, teleskop_yuklagichlar, trailers } from "@/data";
 import { useParams } from "next/navigation";
 
 export default function CartType() {
   const router = useParams();
+  const carType = router.carType;
   return (
-    <div dir="ltr" className="my-20" >
+    <div dir="ltr" className="my-20">
       <Title text="tex-rent" />
+
+      {/* car type groups */}
+      <div className="mt-10 grid grid-cols-3 gap-5 max-w-[1200px] w-full mx-auto">
+        
+        {/* Avtosementavoz */}
+        {carType === "cement-truck" && cement_trucks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Samasvallar */}
+        {carType === "dumb-truck" && dumb_trucks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Traylerlar */}
+        {carType === "trailers" && trailers.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Gazellar */}
+        {carType === "gazels" && gazels.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Avtominora */}
+        {carType === "avtotowers" && avtominora.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })} 
+
+        {/* Avtokran */}
+        {carType === "avtocranes" && avtokran.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Minora kranlar */}
+        {carType === "tower-cranes" && minora.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Dizel ko'targichlar */}
+        {carType === "lifters" && dizel.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Paletli kranlar */}
+        {carType === "crawler-cranes" && paletli_kranlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* old yuklagichlar */}
+        {carType === "front-loaders" && old_yuklagichlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Teleskopik yuklagichlar */}
+        {carType === "tele-loaders" && teleskop_yuklagichlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* forkliftlar */}
+        {carType === "forklift-trucks" && forkliftlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Paletli ekskavatorlar */}
+        {carType === "crawler-excavators" && paletli_eks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* G'ildirakli ekskavatorlar */}
+        {carType === "wheel-excavators" && gildirakli_eks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Mini-ekskavatorlar */}
+        {carType === "mini-excavators" && mini_eks.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* ekskavator yuklagichlar */}
+        {carType === "excavator-loaders" && eks_yuklagichlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* avtogreyderlar */}
+        {carType === "avtograders" && avtogreyderlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Buldozerlar */}
+        {carType === "buldozers" && buldozerlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Katkalar */}
+        {carType === "katkas" && katkalar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+
+        {/* Kampressorlar */}
+        {carType === "compressors" && kompressorlar.map((item)=>{
+          return <InnerProductcard data={item} key={item.id} />
+        })}
+      </div>
     </div>
   );
 }

app/[lang]/layout.tsx

@@ -3,7 +3,7 @@ import Header from "@/components/nav_foot/header";
 import Navbar from "@/components/nav_foot/navbar";
 import Footer from "@/components/nav_foot/footer";
 import Contact from "@/components/pageParts/contact";
-import UpScrollIcon from "@/components/upScroll";
+import UpScrollIcon from "@/components/lib_components/upScroll";
 
 export default async function LangLayout({
   children,

app/layout.tsx

@@ -2,6 +2,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { CarDetailProvider } from "@/components/lib_components/carDetailProvider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -23,8 +24,10 @@ export default function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="uz">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        {children}
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <CarDetailProvider>{children}</CarDetailProvider>
       </body>
     </html>
   );