feat(items page): add item categories to items page

.eslintrc.js

@@ -66,6 +66,7 @@ module.exports = {
                 ],
             },
         ],
+        "@next/next/no-img-element": "off",
         //#endregion  //*======== Import Sort ===========
     },
     globals: {

src/components/categorycard/CategoryCard.jsx

@@ -1,17 +1,21 @@
-import Image from "next/image";
+import Link from "next/link";
 
-const CategoryCard = ({ title, image, category }) => {
+const CategoryCard = ({ imgSrc, title, href }) => {
     return (
-        <div className='max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden h-36 w-36 '>
-            {/* <Image
-                className='h-36 w-36 object-cover'
-                src={image}
-                alt={title}
-            /> */}
-            <div className='px-6 py-4 text-center'>
-                <div className='text-lg mb-2 mt-20'>{category}</div>
+        <Link href={href}>
+            <div className='h-fit w-36 group'>
+                <div className='w-36 h-36 border border-slate-300 rounded-lg bg-slate-100 shadow-lg '>
+                    <img
+                        className='rounded-lg object-cover w-full h-full'
+                        src={imgSrc}
+                        alt={title}
+                    />
+                </div>
+                <p className='text-black text-lg text-center mt-4 font-medium group-hover:text-green'>
+                    {title}
+                </p>
             </div>
-        </div>
+        </Link>
     );
 };
 

src/constants/index.js

@@ -4,7 +4,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec1.png"}
+                src='/marketing-icons/sec1.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -17,7 +17,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec2.png"}
+                src='/marketing-icons/sec2.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -30,7 +30,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec3.png"}
+                src='/marketing-icons/sec3.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -45,7 +45,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec4.png"}
+                src='/secondherosec-icons/sec4.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -58,7 +58,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec5.png"}
+                src='/secondherosec-icons/sec5.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -71,7 +71,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec6.png"}
+                src='/secondherosec-icons/sec6.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -84,7 +84,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec7.png"}
+                src='/secondherosec-icons/sec7.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -95,3 +95,48 @@ export const marketingCardData2 = [
             "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
     },
 ];
+
+export const categories = [
+    {
+        id: 1,
+        title: "Electronics",
+        imgSrc: "/images/category_img/category_electronics.webp",
+        href: "/?category=electronics",
+    },
+    {
+        id: 2,
+        title: "Academic",
+        imgSrc: "/images/category_img/category_academic.webp",
+        href: "/?category=academic",
+    },
+    {
+        id: 3,
+        title: "Clothes",
+        imgSrc: "/images/category_img/category_clothes.webp",
+        href: "/?category=clothes",
+    },
+    {
+        id: 4,
+        title: "Dorm",
+        imgSrc: "/images/category_img/category_dorm.webp",
+        href: "/?category=dorm",
+    },
+    {
+        id: 5,
+        title: "Entertainment",
+        imgSrc: "/images/category_img/category_entertainment.webp",
+        href: "/?category=entertainment",
+    },
+    {
+        id: 6,
+        title: "Beauty",
+        imgSrc: "/images/category_img/category_beauty.webp",
+        href: "/?category=beauty",
+    },
+    {
+        id: 7,
+        title: "Other",
+        imgSrc: "/images/category_img/category_other.webp",
+        href: "/?category=other",
+    },
+];

src/pages/products/index.jsx

@@ -0,0 +1,13 @@
+import CategoryCard from "@/components/categorycard/CategoryCard";
+
+import { categories } from "@/constants";
+
+export default function ProductsPage() {
+    return (
+        <div className='my-32 flex justify-between'>
+            {categories.map((category) => {
+                return <CategoryCard key={category.id} {...category} />;
+            })}
+        </div>
+    );
+}