connected to backend

components/carPageParts/carType_head.tsx

@@ -5,9 +5,11 @@ import Image from "next/image";
 import { useParams } from "next/navigation";
 import Text from "../lib_components/text";
 import Link from "next/link";
+import { useCarType } from "@/store/carType";
 
 export default function CarType_Header() {
   const params = useParams();
+  const initialCar = useCarType((state) => state.initialCar);
   console.log(params);
   return (
     <div
@@ -47,12 +49,20 @@ export default function CarType_Header() {
             <Text txt="home" />
           </Link>
           /
-          <Link href={`/${params.lang}/${params.carType}`} className={params.carDeatil ? "hover:text-secondary hover:cursor-pointer":"text-secondary"}>
-            <Text txt={`${params.carType}`} />
+          <Link
+            href={`/${params.lang}/${params.carType}`}
+            className={
+              params.carDeatil
+                ? "hover:text-secondary hover:cursor-pointer"
+                : "text-secondary"
+            }
+          >
+            {initialCar.name}
           </Link>
-          {params.carDeatil && '/'}
-          {params.carDeatil &&  <div className="text-secondary">
-            <Text txt={`${params.carType}`} /></div>}
+          {params.carDeatil && "/"}
+          {params.carDeatil && (
+            <div className="text-secondary">{initialCar.name}</div>
+          )}
         </div>
       </div>
     </div>