add additional filter to product page

pages/products/product/mianProduct.tsx

@@ -10,6 +10,7 @@ import { useProductPageInfo } from "@/zustand/useProduct";
 import { useSubCategory } from "@/zustand/useSubCategory";
 import { useTranslations } from "next-intl";
 import PaginationLite from "@/components/paginationUI";
+import { useCatalog } from "@/zustand/useCatalog";
 
 export default function MainProduct() {
   const t = useTranslations();
@@ -18,6 +19,7 @@ export default function MainProduct() {
   const filter = useFilter((s) => s.filter);
   const getFiltersByType = useFilter((s) => s.getFiltersByType);
   const setProduct = useProductPageInfo((s) => s.setProducts);
+  const parentID = useCatalog((state) => state.parentID);
 
   const [currentPage, setCurrentPage] = useState(1);
 
@@ -34,7 +36,9 @@ export default function MainProduct() {
   const requestLink = useMemo(() => {
     const baseLink = category.have_sub_category
       ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
-      : endPoints.product.byCategory({ id: category.id, currentPage });
+      : parentID
+        ? endPoints.product.byCatalogSection({ id: parentID, currentPage })
+        : endPoints.product.byCategory({ id: category.id, currentPage });
     return `${baseLink}${queryParams}`;
   }, [
     category.id,

pages/products/product/products.tsx

@@ -5,7 +5,7 @@ export function Products() {
   return (
     <div className="bg-[#1e1d1c] pb-10 pt-5 px-2">
       <div className="max-w-300 mx-auto w-full z-20 relative">
-        <div className="flex flex-col items-start gap-5">
+        <div className="flex flex-col items-start gap-2">
           {/* filter part */}
           <Filter />