catalog connected to backend

app/[locale]/products/page.tsx

@@ -1,14 +1,10 @@
-"use client"
 import { ProductBanner, Products } from "@/components/pages/products";
-import { useSearchParams } from "next/navigation";
 
 export default function Page() {
-  const searchParams = useSearchParams()
-  const category = searchParams.get("category");
   return (
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
-      <Products categoryName={category || null} />
+      <Products />
     </div>
   );
 }

app/[locale]/subCategory/page.tsx

@@ -0,0 +1,13 @@
+import { ProductBanner } from "@/components/pages/products";
+import { MainSubCategory } from "@/components/pages/subCategory";
+
+export default function Page() {
+  return (
+    <div className="bg-[#1e1d1c] pb-30">
+      <ProductBanner />
+      <div className="py-20">
+        <MainSubCategory />
+      </div>
+    </div>
+  );
+}

components/pages/home/blog/catalog.tsx

@@ -12,7 +12,7 @@ import { CategoryType } from "@/lib/types";
 export default function Catalog() {
   const language = getRouteLang();
   const { data, isLoading } = useQuery({
-    queryKey: ["categorycasd", language],
+    queryKey: ["category", language],
     queryFn: () => httpClient(endPoints.category.all),
     select: (data): CategoryType[] => data?.data?.results,
   });
@@ -50,6 +50,7 @@ export default function Catalog() {
           title={item.name}
           description={item.description}
           image={item.image}
+          have_sub_category={item.have_sub_category}
         />
       ))}
     </div>

components/pages/products/catalog.tsx

@@ -48,12 +48,15 @@ import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
+import { useCategory } from "@/store/useCategory";
+import { useSubCategory } from "@/store/useSubCategory";
 
 interface CatalogProps {
   id: number;
   image: string;
   title: string;
   description: string;
+  have_sub_category: boolean;
 }
 
 export default function CatalogCard({
@@ -61,14 +64,33 @@ export default function CatalogCard({
   title,
   description,
   id,
+  have_sub_category,
 }: CatalogProps) {
   const t = useTranslations();
   const locale = useLocale();
-  console.log("category id: ", id);
+  const setCategory = useCategory((state) => state.setCategory);
+  const clearSubCategory = useSubCategory((state) => state.clearSubCategory);
+  const item = {
+    image: image,
+    name: title,
+    description: description,
+    id: id,
+    have_sub_category: have_sub_category,
+  };
+
+  const updateZustands = () => {
+    setCategory(item);
+    clearSubCategory();
+  };
+
+  const navigateLink = have_sub_category
+    ? `/${locale}/subCategory?category=${id}`
+    : `/${locale}/products?category=${id}`;
 
   return (
     <Link
-      href={`/${locale}/products?category=${id}`}
+      href={navigateLink}
+      onClick={updateZustands}
       className="group relative h-112.5 w-full overflow-hidden rounded-2xl bg-[#17161679] from-[#444242] to-black border hover:border-red-700 border-white/10 transition-all duration-500 hover:-translate-y-1"
     >
       {/* Background glow effect */}
@@ -92,7 +114,7 @@ export default function CatalogCard({
 
           {/* Description */}
           <p className="text-sm font-almarai text-white/60 line-clamp-2 group-hover:text-white/80 transition-colors duration-300">
-            {t(description)}
+            {description}
           </p>
         </div>
 

components/pages/products/filter/filter.tsx

@@ -2,6 +2,8 @@
 import { useFilter } from "@/lib/filter-zustand";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
+import { useCategory } from "@/store/useCategory";
+import { useSubCategory } from "@/store/useSubCategory";
 import { useQuery } from "@tanstack/react-query";
 import { Check } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -10,6 +12,8 @@ export default function Filter() {
   const filter = useFilter((state) => state.filter);
   const toggleFilter = useFilter((state) => state.toggleFilter);
   const hasData = useFilter((state) => state.hasFilter);
+  const category = useCategory((state) => state.category);
+  const subCategory = useSubCategory((state) => state.subCategory);
 
   const [dataExpanded, setDataExpanded] = useState<boolean>(false);
   const [numberExpanded, setNumberExpanded] = useState<boolean>(false);
@@ -145,6 +149,11 @@ export default function Filter() {
     ? sizeData
     : sizeData.slice(0, 10);
 
+  console.log("have suncategory: ", category.have_sub_category);
+  if (category.have_sub_category || subCategory.id!==0) {
+    return null;
+  }
+
   return (
     <div className="space-y-3 max-w-70 w-full text-white">
       {/* Bo'lim filtri */}

components/pages/products/index.ts

@@ -1,5 +1,5 @@
-export { ProductBanner } from "./productBanner";
-export { Products } from "./products";
+export { ProductBanner } from "./banner";
+export { Products } from "./product/products";
 export { SliderComp } from "./slug/slider";
 export { RightSide } from "./slug/rightSide";
 export { Features } from "./slug/features";

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

@@ -1,5 +1,5 @@
-"use client";
 
+import { useLocale } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -14,22 +14,24 @@ export default function ProductCard({
   image,
   slug,
 }: ProductCardProps) {
+  const locale = useLocale();
+
   return (
-    <Link href={`/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 ">
+    <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"
+            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">
-          {/* Title */}
           <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>

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>
+  );
+}

components/pages/products/products.tsx

@@ -1,47 +0,0 @@
-import { ca, lede, slt } from "@/lib/demoData";
-import Filter from "./filter";
-import FilterInfo from "./filterInfo";
-import ProductCard from "./productCard";
-
-// slt , ca , lede
-
-export function Products({ categoryName }: { categoryName: string | null }) {
-  console.log("category name: ",categoryName)
-  const getProducts = () => {
-    switch (categoryName) {
-      case "slt":
-        return slt;
-      case "ca":
-        return ca;
-      case "lede":
-        return lede;
-      default:
-        return [...slt, ...ca, ...lede];
-    }
-  };
-
-  const products = getProducts();
-  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 */}
-          <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-            {products.map((item, index) => (
-              <ProductCard
-                key={index}
-                title={item.name}
-                image={item.image}
-                slug={item.slug}
-              />
-            ))}
-          </div>
-          <FilterInfo />
-        </div>
-      </div>
-    </div>
-  );
-}

components/pages/subCategory/body.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { useCategory } from "@/store/useCategory";
+import Card from "./card";
+
+export function MainSubCategory() {
+  const category = useCategory((state) => state.category);
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["subCategory"],
+    queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
+    select: (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) => (
+        <Card
+          key={item.id} // ✅ index o'rniga id ishlatish
+          title={item.name}
+          image={item.image}
+          slug={item.slug}
+          id={item.id}
+          category={item.category}
+        />
+      ))}
+    </div>
+  );
+}

components/pages/subCategory/card.tsx

@@ -0,0 +1,60 @@
+import { useSubCategory } from "@/store/useSubCategory";
+import { useLocale } from "next-intl";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+interface ProductCardProps {
+  id: number;
+  category: number;
+  title: string;
+  image: string;
+  slug: string;
+}
+
+export default function Card({
+  title,
+  image,
+  slug,
+  id,
+  category,
+}: ProductCardProps) {
+  const locale = useLocale();
+  const router = useRouter();
+  const setSubCategory = useSubCategory((state) => state.setSubCategory);
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    setSubCategory({
+      id,
+      name: title,
+      image,
+      category,
+    });
+    router.push(`/${locale}/products/${slug}`);
+  };
+  return (
+    <Link href="#" onClick={handleClick}>
+      <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/subCategory/index.ts

@@ -0,0 +1 @@
+export { MainSubCategory } from "./body";

lib/types.ts

@@ -3,6 +3,7 @@ export interface CategoryType {
   name: string;
   image: string;
   description: string;
+  have_sub_category: boolean;
 }
 
 export interface SubCategoryType {

store/useCategory.ts

@@ -4,6 +4,7 @@ import { create } from "zustand";
 interface CategoryZustandType {
   category: CategoryType;
   setCategory: (category: CategoryType) => void;
+  clearCatalog: () => void;
 }
 
 const demoCategory: CategoryType = {
@@ -11,9 +12,11 @@ const demoCategory: CategoryType = {
   name: "",
   description: "",
   image: "",
+  have_sub_category: false,
 };
 
 export const useCategory = create<CategoryZustandType>((set) => ({
   category: demoCategory,
   setCategory: (data) => set({ category: data }),
+  clearCatalog: () => set({ category: demoCategory }),
 }));

store/useSubCategory.ts

@@ -4,6 +4,7 @@ import { create } from "zustand";
 interface SubCategoryZustandType {
   subCategory: SubCategoryType;
   setSubCategory: (subCategory: SubCategoryType) => void;
+  clearSubCategory: () => void;
 }
 
 const demoSubCategory = {
@@ -15,4 +16,5 @@ const demoSubCategory = {
 export const useSubCategory = create<SubCategoryZustandType>((set) => ({
   subCategory: demoSubCategory,
   setSubCategory: (data) => set({ subCategory: data }),
+  clearSubCategory: () => set({ subCategory: demoSubCategory }),
 }));