detail page connected to backend , modal form for one product connected to backend

components/pages/products/product/mianProduct.tsx

@@ -5,12 +5,14 @@ import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/store/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { useProductPageInfo } from "@/store/useProduct";
 
 export default function MainProduct() {
   const category = useCategory((state) => state.category);
   const filter = useFilter((state) => state.filter);
-  const getFiltersByType = useFilter((state)=>state.getFiltersByType)
+  const getFiltersByType = useFilter((state) => state.getFiltersByType);
+  const setProduct = useProductPageInfo((state) => state.setProducts);
 
   // Query params yaratish
   const queryParams = useMemo(() => {
@@ -38,11 +40,19 @@ export default function MainProduct() {
   }, [category.id, category.have_sub_category, queryParams]);
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ["products", category.id , queryParams],
+    queryKey: ["products", category.id, queryParams],
     queryFn: () => httpClient(requestLink),
-    select: (data) => data?.data?.data?.results,
+    select: (data) => {
+      const product = data?.data?.data?.results;
+      return product.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        image: item.images[0].image,
+      }));
+    },
   });
 
+
   if (isLoading) {
     return (
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -74,6 +84,7 @@ export default function MainProduct() {
       {data.map((item: any) => (
         <ProductCard
           key={item.id} // ✅ index o'rniga id ishlatish
+          getProduct={() => setProduct(item)}
           title={item.name}
           image={item.image}
           slug={item.slug}

components/pages/products/product/productCard.tsx

@@ -1,4 +1,3 @@
-
 import { useLocale } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,17 +6,19 @@ interface ProductCardProps {
   title: string;
   image: string;
   slug: string;
+  getProduct: () => void;
 }
 
 export default function ProductCard({
   title,
   image,
   slug,
+  getProduct,
 }: ProductCardProps) {
   const locale = useLocale();
 
   return (
-    <Link href={`/${locale}/products/${slug}`}>
+    <Link href={`/${locale}/products/${slug}`} onClick={getProduct}>
       <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">