update product component sorted base static data

components/pageParts/products/products.tsx

@@ -10,6 +10,22 @@ import { EmptyState } from "@/components/emptyState";
 import { usePathname } from "next/navigation";
 import { baseUrl } from "@/data/url";
 
+// Kerakli tartib (id lar bo'yicha)
+const CATEGORY_ORDER: number[] = [1, 2, 3, 4, 6, 5, 8, 9, 23, 11, 12, 10, 14, 26, 17, 13, 20, 19, 21, 28];
+
+function sortByCustomOrder(data: ProductTypes[]): ProductTypes[] {
+  return [...data].sort((a, b) => {
+    const indexA = CATEGORY_ORDER.indexOf(a.id);
+    const indexB = CATEGORY_ORDER.indexOf(b.id);
+
+    // Agar id topilmasa - oxiriga surish
+    if (indexA === -1) return 1;
+    if (indexB === -1) return -1;
+
+    return indexA - indexB;
+  });
+}
+
 export default function Products() {
   const [cars, setCars] = useState<ProductTypes[]>([]);
   const [loading, setLoading] = useState(true);
@@ -34,15 +50,15 @@ export default function Products() {
         }
 
         const data = await response.json();
-        console.log("backend Data: ", data?.data);
 
         if (data?.data && data.data.length > 0) {
-          setCars(data.data);
+          // ✅ Qayta tartiblash
+          const sorted = sortByCustomOrder(data.data);
+          setCars(sorted);
         } else {
           setCars([]);
         }
       } catch (error) {
-        console.log("Xatolik: ", error);
         setError(error instanceof Error ? error.message : "Noma'lum xatolik");
       } finally {
         setLoading(false);
@@ -54,7 +70,6 @@ export default function Products() {
 
   return (
     <div dir="ltr" className="max-w-[1200px] w-full mx-auto">
-      {/* title part */}
       <div className="flex flex-col mb-10">
         <div className="flex items-center justify-center w-full">
           <div className="text-[#f2a01c] px-2 text-[18px] font-semibold">
@@ -64,7 +79,6 @@ export default function Products() {
         <Title text="pricing-h2" />
       </div>
 
-      {/* Error message */}
       {error && (
         <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
           <p className="text-red-600 text-center">
@@ -73,7 +87,6 @@ export default function Products() {
         </div>
       )}
 
-      {/* products */}
       <div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
         {loading ? (
           <LoadingSkeleton />
@@ -89,4 +102,4 @@ export default function Products() {
       </div>
     </div>
   );
-}
+}