categorylist added

src/Component/categoryList/CategoryList.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import styles from "./categoryList.module.css";
+import Link from "next/link";
+import Image from "next/image";
+
+const getData = async () => {
+  const res = await fetch("http://localhost:3000/api/categories", {
+    cache: "no-store",
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed");
+  }
+
+  return res.json();
+};
+
+const CategoryList = async () => {
+  const data = await getData();
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>Popular Categories</h1>
+      <div className={styles.categories}>
+        {data?.map((item) => (
+          <Link
+            href="/blog?cat=style"
+            className={`${styles.category} ${styles[item.slug]}`}
+            key={item._id}
+          >
+            {item.img && (
+              <Image
+                src={item.img}
+                alt=""
+                width={32}
+                height={32}
+                className={styles.image}
+              />
+            )}
+            {item.title}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CategoryList;

src/Component/categoryList/categoryList.module.css

@@ -0,0 +1,71 @@
+
+.title {
+  margin: 50px 0px;
+}
+
+.categories {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.category {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-transform: capitalize;
+  width: 15%;
+  height: 80px;
+  justify-content: center;
+  border-radius: 10px;
+}
+
+.category.style {
+  background-color: #57c4ff31;
+}
+
+.category.fashion {
+  background-color: #da85c731;
+}
+
+.category.food {
+  background-color: #7fb88133;
+}
+
+.category.travel {
+  background-color: #ff795736;
+}
+
+.category.culture {
+  background-color: #ffb04f45;
+}
+
+.category.coding {
+  background-color: #5e4fff31;
+}
+
+.image {
+  border-radius: 50%;
+}
+
+@media screen and (max-width: 1280px) {
+  .category {
+    width: 20%;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .category {
+    width: 25%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .category {
+    width: 45%;
+  }
+}
+@media screen and (max-width: 640px) {
+  .category {
+    width: 100%;
+  }
+}

src/app/page.jsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import styles from "./homepage.module.css";
  import Featured from "@/Component/featured/featured";
-// import CategoryList from "@/Component/categoryList/CategoryList";
+ import CategoryList from "@/Component/categoryList/CategoryList";
 // import CategoryList from "@/Component/categoryList/CategoryList";
 // import Featured from "@/Component/featured/featured";
 // import CardList from "@/Component/cardList/CardList";
@@ -14,8 +14,8 @@ export default function Home({ searchParams }) {
   return (
     <div className={styles.containermain}>
         <Featured />
-      {/* <CategoryList />
-      <div className={styles.content}>
+      <CategoryList />
+      {/* <div className={styles.content}>
         <CardList page={page}/>
         <Menu /> 
       </div>  */}