catalog connected to backend

components/pages/products/product/mianProduct.tsx

@@ -0,0 +1,59 @@
+"use client";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import ProductCard from "./productCard";
+import { useCategory } from "@/store/useCategory";
+
+export default function MainProduct() {
+  const category = useCategory((state) => state.category);
+
+  const requestLink = category.have_sub_category
+    ? endPoints.subCategory.byId(category.id)
+    : endPoints.product.byCategory(category.id || 0);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["products", category.id],
+    queryFn: () => httpClient(requestLink),
+    select: (data) => data?.data?.data?.results,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-96 bg-gray-800 animate-pulse rounded-2xl" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-red-500 py-10">
+        Ma'lumotlarni yuklashda xatolik yuz berdi
+      </div>
+    );
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <div className="text-center text-gray-400 py-10">
+        Mahsulotlar topilmadi
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+      {data.map((item: any) => (
+        <ProductCard
+          key={item.id} // ✅ index o'rniga id ishlatish
+          title={item.name}
+          image={item.image}
+          slug={item.slug}
+        />
+      ))}
+    </div>
+  );
+}

components/pages/products/product/productCard.tsx

@@ -0,0 +1,42 @@
+
+import { useLocale } from "next-intl";
+import Image from "next/image";
+import Link from "next/link";
+
+interface ProductCardProps {
+  title: string;
+  image: string;
+  slug: string;
+}
+
+export default function ProductCard({
+  title,
+  image,
+  slug,
+}: ProductCardProps) {
+  const locale = useLocale();
+
+  return (
+    <Link href={`/${locale}/products/${slug}`}>
+      <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
+        {/* Image Container */}
+        <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">
+          <Image
+            src={image || "/placeholder.svg"}
+            alt={title}
+            fill
+            className="object-contain transition-transform duration-300 group-hover:scale-105"
+            sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
+          />
+        </div>
+
+        {/* Content Container */}
+        <div className="p-6 sm:p-4">
+          <h3 className="text-lg text-center sm:text-xl md:text-2xl font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
+            {title}
+          </h3>
+        </div>
+      </article>
+    </Link>
+  );
+}

components/pages/products/product/products.tsx

@@ -0,0 +1,21 @@
+import Filter from "../filter/filter";
+import FilterInfo from "../filter/filterInfo";
+import MainProduct from "./mianProduct";
+
+export function Products() {
+  return (
+    <div className="bg-[#1e1d1c] py-20">
+      <div className="max-w-300 mx-auto w-full z-20 relative">
+        <div className="flex items-start gap-5">
+          {/* filter part */}
+          <Filter />
+
+          {/* main products */}
+          <MainProduct />
+
+          <FilterInfo />
+        </div>
+      </div>
+    </div>
+  );
+}