Add cursor pointer for categories

Author: w3bdesign

components/Category/Categories.component.jsx

@@ -6,6 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
  * @param {Object} categories
  */
 const Categories = ({ categories }) => {
+ 
   return (
     <>
 
@@ -16,10 +17,11 @@ const Categories = ({ categories }) => {
           {categories.map(({ name }) => (
             <div
               key={uuidv4()}
-              className="flex flex-col justify-around p-6 xs:w-1/2 md:w-1/3 xl:w-1/4"
+              className="flex flex-col justify-around p-6 cursor-pointer xs:w-1/2 md:w-1/3 xl:w-1/4"
             >
               <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
                 <p className="text-lg">{name}</p>
+               
               </div>
             </div>
           ))}

utils/const/GQL_QUERIES.js

@@ -107,10 +107,12 @@ export const FETCH_ALL_PRODUCTS_QUERY = gql`
  * Fetch all categories from GraphQL
  */
 export const FETCH_ALL_CATEGORIES_QUERY = gql`
-  query MyQuery {
-    productCategories {
+  query Categories {
+    productCategories(first: 10) {
       nodes {
+        id
         name
+        slug
       }
     }
   }