first commit

src/app/(index)/shop/page.tsx

@@ -1,43 +1,45 @@
+'use client'
+
 import ProductCategoryBox from '@/app/components/layout/shop/products-cat'
 import Image from 'next/image'
+import axiosInstance from '@/axios/axiosInstance'
+import { useEffect, useState } from 'react'
+import { useQuery,useQueryClient } from '@tanstack/react-query'
+
+const Page =  ()=>{
+
+    const [category, setCategory] = useState([])
+
+    const queryClient = useQueryClient()
+
+    const query = useQuery({ queryKey: ['categoryProducts'], queryFn: async ()=>{
+        return await axiosInstance.get("shop/v2/product-category/list/")
+    },refetchOnWindowFocus:false, onSuccess(result:any) {
+        setCategory(result.data)
+    }, })
+
+    if(query.isLoading){
+        return (
+            <p className='text-center'>درحال دریافت اطلاعات</p>
+        )
+    }
+
+    if(query.isError){
+        return (
+            <p className='text-center'>
+                خطا در دریافت اطلاعات
+            </p>
+        )
+    }
 
-const Page = ()=>{
     return (
         <>
             <div className="grid grid-cols-2 min-[1350px]:grid-cols-5 min-[767px]:grid-cols-3 min-[1100px]:grid-cols-4 gap-x-2 gap-y-2">
 
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
-                <ProductCategoryBox />
+                {query.isSuccess?category.map((iteam:any)=>{
+                    return <ProductCategoryBox key={iteam.id} iteam={iteam} />
+                }):null}
+                
             </div>
         </>
     )