Implement grid column layout for categories

Author: w3bdesign

components/Category/Categories.component.jsx

@@ -10,20 +10,24 @@ const Categories = ({ categories }) => {
   return (
     <>
       <section className="container mx-auto bg-white">
-        <div className="flex ">
+      <div className="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3">
           {categories.map(({ id, name, slug }) => (
-            <Link as={`/kategori/${slug}?id=${id}`} href="/kategori/[id]">
+            <Link
+              key={uuidv4()}
+              as={`/kategori/${slug}?id=${id}`}
+              href="/kategori/[id]"
+            >
               <div
-                key={uuidv4()}
-                className="flex flex-col justify-around p-6 cursor-pointer 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"
+                className="p-6 cursor-pointer"
               >
                 <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>
             </Link>
           ))}
-        </div>
+       </div>
       </section>
     </>
   );

components/Product/GetHoodiesProducts.component.jsx

@@ -26,6 +26,7 @@
     "nprogress": "^0.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-hook-form": "^6.0.1",
     "react-instantsearch-dom": "^6.6.0",
     "react-spring": "^8.0.27",
     "styled-components": "^5.1.1",