slider component updated

components/pageParts/contact.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslations } from "next-intl";
 import Text from "../lib_components/text";
 import axios from "axios";
 import { FormEvent } from "react";
@@ -42,7 +42,7 @@ const isValidPhone = (value: string) => {
 };
 
 export default function Contact() {
-  const { t } = useTranslation();
+  const t = useTranslations();
   const [phone, setPhone] = useState("");
 
   const handlePhoneChange = (value: string) => {
@@ -63,7 +63,7 @@ export default function Contact() {
       : `+998${normalized}`;
 
     try {
-      const token = "7940057045:AAHRFPvgUCo_7pqpXD6uq4li7-_DYx2J96g"; // Use environment variable
+      const token = "7940057045:AAHRFPvgUCo_7pqpXD6uq4li7-_DYx2J96g";
       const chatId = 6134458285;
 
       if (!token || !chatId) {
@@ -99,7 +99,6 @@ export default function Contact() {
             <Text txt="contact-h2" />
           </h2>
 
-          {/* Form */}
           <form
             className="flex max-sm:flex-col gap-5 w-full max-w-2xl px-4"
             onSubmit={sendMessage}

components/pageParts/newsSlider.tsx

@@ -6,13 +6,89 @@ import "swiper/css";
 import "swiper/css/navigation";
 import Title from "../lib_components/title";
 import SliderCard from "../cards/sliderCard";
-import { sliderData } from "@/data";
+import { useEffect, useState } from "react";
+import { ProductTypes } from "@/types";
+import { usePathname } from "next/navigation";
+import Text from "../lib_components/text";
+import { LoadingSkeleton } from "../loadingProduct";
+import { baseUrl } from "@/data/url";
 
 // The custom CSS selectors for navigation
 const navigationPrevEl = ".custom-swiper-prev";
 const navigationNextEl = ".custom-swiper-next";
 
+function getRandomItems(arr: any[], count: number) {
+  const shuffled = [...arr];
+
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+
+  return shuffled.slice(0, count);
+}
+
 export default function CustomSlider() {
+  const [cars, setCars] = useState<ProductTypes[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const pathname = usePathname();
+  const lang = pathname.split("/")[1];
+  useEffect(() => {
+    const fetchProducts = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await fetch(baseUrl, {
+          headers: {
+            "Accept-Language": lang,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error("Server xatosi");
+        }
+
+        const data = await response.json();
+        console.log("backend Data slider: ", data?.data);
+
+        if (data?.data && data.data.length > 0) {
+          const dataSlider = getRandomItems(data.data, 6);
+          const formattedData = dataSlider.map((item) => ({
+            id: item.id,
+            truck_name: item.name,
+            desc: "news-title1",
+            image: item.image || "",
+          }));
+          setCars(formattedData);
+        } else {
+          setCars([]);
+        }
+      } catch (error) {
+        console.log("Xatolik: ", error);
+        setError(error instanceof Error ? error.message : "Noma'lum xatolik");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProducts();
+  }, [lang]);
+
+  if (error) {
+    return (
+      <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+        <p className="text-red-600 text-center">
+          <Text txt="downloadError" /> : {error}
+        </p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return <LoadingSkeleton />;
+  }
   return (
     <div
       dir="ltr"
@@ -29,7 +105,7 @@ export default function CustomSlider() {
           <button
             className={`${navigationPrevEl.replace(
               ".",
-              ""
+              "",
             )} w-10 h-10  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
           >
             ‹
@@ -37,7 +113,7 @@ export default function CustomSlider() {
           <button
             className={`${navigationNextEl.replace(
               ".",
-              ""
+              "",
             )} w-10 h-10 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
           >
             ›
@@ -62,7 +138,7 @@ export default function CustomSlider() {
           1024: { slidesPerView: 3 },
         }}
       >
-        {sliderData.map((item, index) => (
+        {cars.map((item, index) => (
           <SwiperSlide key={index}>
             <SliderCard data={item} />
           </SwiperSlide>

components/pageParts/products/products.tsx

@@ -4,7 +4,6 @@ import React, { useEffect, useState } from "react";
 import Title from "../../lib_components/title";
 import Text from "../../lib_components/text";
 import type { ProductTypes } from "@/types";
-import { allProducts } from "@/data";
 import ProductCard from "../../cards/productCard";
 import { LoadingSkeleton } from "@/components/loadingProduct";
 import { EmptyState } from "@/components/emptyState";
@@ -45,15 +44,13 @@ export default function Products() {
       } catch (error) {
         console.log("Xatolik: ", error);
         setError(error instanceof Error ? error.message : "Noma'lum xatolik");
-        // Xatolik bo'lsa ham local data'ni ko'rsatish
-        setCars(allProducts);
       } finally {
         setLoading(false);
       }
     };
 
     fetchProducts();
-  }, [lang]); // Bo'sh array - faqat bitta marta ishlaydi
+  }, [lang]);
 
   return (
     <div dir="ltr" className="max-w-[1200px] w-full mx-auto">