carType page over

components/lib_components/carDetailProvider.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { innerCardTypes } from '@/types';
+
+// 1️⃣ Context tipi
+interface CarDetailContextType {
+  detail: innerCardTypes | null;
+  setDetail: React.Dispatch<React.SetStateAction<innerCardTypes | null>>;
+}
+
+// 2️⃣ Default context qiymatini yaratamiz
+const CarDetailContext = createContext<CarDetailContextType | undefined>(undefined);
+
+// 3️⃣ Provider komponent
+export const CarDetailProvider = ({ children }: { children: ReactNode }) => {
+  const [detail, setDetail] = useState<innerCardTypes | null>(null);
+
+  return (
+    <CarDetailContext.Provider value={{ detail, setDetail }}>
+      {children}
+    </CarDetailContext.Provider>
+  );
+};
+
+// 4️⃣ Custom hook (Context’ni qulay ishlatish uchun)
+export const useCarDetail = () => {
+  const context = useContext(CarDetailContext);
+  if (!context) {
+    throw new Error('useCarDetail must be used within a CarDetailProvider');
+  }
+  return context;
+};

components/lib_components/google.map.tsx

@@ -0,0 +1,77 @@
+"use client";
+/// <reference types="google.maps" />
+
+import { useEffect, useRef } from "react";
+import Script from "next/script";
+
+declare global {
+  interface Window {
+    initMap?: () => void;
+    google?: typeof google;
+  }
+}
+
+type Props = { lat?: number; lng?: number; zoom?: number };
+
+export default function GoogleMap({
+  lat = 41.2628056, // rasmda ko‘rsatilgan koordinata (41°15'46.1"N 69°13'08.8"E)
+  lng = 69.2191111,
+  zoom = 17,
+}: Props) {
+  const mapRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    window.initMap = () => {
+      if (!mapRef.current || !window.google) return;
+
+      const center = new google.maps.LatLng(lat, lng);
+      const map = new google.maps.Map(mapRef.current, {
+        center,
+        zoom,
+        mapTypeControl: true,          // 🛰 Satellite tugmasi
+        streetViewControl: true,      // Street View tugmasi
+        fullscreenControl: true,      // Fullscreen
+        zoomControl: true,            // Zoom tugmalari
+        mapTypeControlOptions: {
+          style: google.maps.MapTypeControlStyle.DEFAULT,
+          position: google.maps.ControlPosition.RIGHT_BOTTOM, // Chap pastga Satellite
+        },
+      });
+
+      // 📌 Marker
+      new google.maps.Marker({
+        position: center,
+        map,
+        title: "Bizning manzil",
+      });
+
+      // 🧭 Koordinata oynasini yaratamiz
+      const coordDiv = document.createElement("div");
+      coordDiv.style.background = "#fff";
+      coordDiv.style.padding = "15px 30px";
+      coordDiv.style.margin = "15px 30px";
+      coordDiv.style.boxShadow = "0 2px 6px rgba(0,0,0,0.3)";
+      coordDiv.innerHTML = `
+        <div style="font-size: 14px; font-weight: 500;">
+          41°15'46.1"N 69°13'08.8"E<br/>
+          <a href="https://www.google.com/maps?q=${lat},${lng}" target="_blank" style="color: #1a73e8; text-decoration: none;">View larger map</a>
+        </div>
+      `;
+      map.controls[google.maps.ControlPosition.TOP_LEFT].push(coordDiv);
+    };
+
+    if (window.google && window.google.maps && typeof window.initMap === "function") {
+      window.initMap();
+    }
+  }, [lat, lng, zoom]);
+
+  return (
+    <>
+      <Script
+        src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&callback=initMap`}
+        strategy="afterInteractive"
+      />
+      <div ref={mapRef} style={{ width: "100%", height: "600px", overflow: "hidden" }} />
+    </>
+  );
+}

components/lib_components/text.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { useTranslation } from "react-i18next";
+
+export default function Text({txt}:{txt:string}) {
+  const { t } = useTranslation();
+  return <div>{t(txt)}</div>;
+}

components/lib_components/title.tsx

@@ -0,0 +1,11 @@
+import { TitleType } from "@/types";
+import React from "react";
+import Text from "./text";
+
+export default function Title({ text }: TitleType) {
+  return (
+    <div className="text-primary md:text-[40px] text-[25px] w-full text-center font-bold ">
+      <Text txt={text} />
+    </div>
+  );
+}

components/lib_components/upScroll.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { FaArrowUp } from "react-icons/fa";
+import { useEffect, useState, useCallback } from "react";
+
+export default function UpScrollIcon() {
+  const [showButton, setShowButton] = useState(false);
+
+  // Scroll hodisasini boshqaruvchi funksiya
+  const handleScroll = useCallback(() => {
+    if (window.scrollY > 200) {
+      // 200px dan pastga tushganda tugma ko'rinadi
+      setShowButton(true);
+    } else {
+      setShowButton(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+
+    // Tozalash (cleanup)
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [handleScroll]);
+
+  // Scrollni yuqoriga olib chiqish funksiyasi
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth", // silliq ko'tarilish
+    });
+  };
+
+  return (
+    <>
+      {showButton && (
+        <span
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 bg-secondary hover:bg-primary text-white p-3 rounded-full cursor-pointer shadow-lg transition"
+        >
+          <FaArrowUp size={20} />
+        </span>
+      )}
+    </>
+  );
+}