Using separated pages insteads of components

components/quests/questCategory.tsx

@@ -1,17 +1,15 @@
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent } from "react";
 import styles from "../../styles/Home.module.css";
-import QuestCategoryDetails from "./questCategoryDetails";
+import Link from "next/link";
 
 type QuestCategoryProps = {
   category: QuestCategory;
 };
 
 const QuestCategory: FunctionComponent<QuestCategoryProps> = ({ category }) => {
-  const [showMenu, setShowMenu] = useState(false);
-
   return (
-    <>
-      <div className={styles.questCategory} onClick={() => setShowMenu(true)}>
+    <Link href={`/categories/${category.name}`}>
+      <div className={styles.questCategory}>
         <div className={styles.categoryInfos}>
           <h2 className="text-gray-200">{category.name} Quest</h2>
           <p className="text-gray-200">
@@ -20,13 +18,7 @@ const QuestCategory: FunctionComponent<QuestCategoryProps> = ({ category }) => {
         </div>
         <img src={category.img} />
       </div>
-      {showMenu && (
-        <QuestCategoryDetails
-          setShowMenu={setShowMenu}
-          quests={category.quests}
-        />
-      )}
-    </>
+    </Link>
   );
 };
 

pages/categories/[category].tsx

@@ -0,0 +1,48 @@
+import { NextPage } from "next";
+import React, { useContext, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { QuestsContext } from "../../context/QuestsProvider";
+import styles from "../../styles/category.module.css";
+import homeStyles from "../../styles/Home.module.css";
+import Quest from "../../components/quests/quest";
+import BackButton from "../../components/UI/backButton";
+
+const CategoriesPage: NextPage = () => {
+  const router = useRouter();
+  const { category: categoryName } = router.query;
+  const { categories } = useContext(QuestsContext);
+
+  const [category, setCategory] = useState<QuestCategory | undefined>();
+
+  useEffect(() => {
+    if (!categoryName) return;
+    setCategory(categories.find((cat) => cat.name === categoryName));
+  }, [categories, categoryName]);
+
+  return (
+    <div className={homeStyles.screen}>
+      <div className={homeStyles.backButton}>
+        <BackButton onClick={() => router.back()} />
+      </div>
+      <h1 className={homeStyles.title}>Onboarding quests</h1>
+      <div className={styles.questList}>
+        {category &&
+          category.quests.map((quest, index) => (
+            <Quest
+              key={index}
+              title={quest.title_card}
+              onClick={() => router.push(`/quest/${quest.id}`)}
+              imgSrc={quest.img_card}
+              issuer={{
+                name: quest.issuer,
+                logoFavicon: quest.logo,
+              }}
+              reward={quest.rewards_title}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default CategoriesPage;

pages/index.tsx

@@ -13,7 +13,7 @@ import { QuestsContext } from "../context/QuestsProvider";
 
 const Quests: NextPage = () => {
   const router = useRouter();
-  const { quests, featuredQuest, categories, trendingQuests } =
+  const { featuredQuest, categories, trendingQuests } =
     useContext(QuestsContext);
 
   return (

styles/Home.module.css

@@ -111,52 +111,10 @@
   z-index: -1;
 }
 
-.categoryDetails {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  background-color: var(--background);
-  z-index: 10;
-  width: 100%;
-  padding-top: calc(12vh + 2em);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.categoryDetails .content {
-  width: 100%;
-  min-height: calc(100% - 13vh - 4em);
-  max-width: calc(100% - 126px);
-  display: block;
-  margin: 0 auto;
-  padding: 25px;
-}
-
-.categoryDetails .footer {
-  width: 100%;
-}
-
 .backButton {
   margin-left: 63px;
 }
 
-.categoryDetails .blur {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: -1;
-}
-
-.categoryDetails .questList {
-  display: flex;
-  gap: 1rem;
-  margin-top: 2rem;
-  flex-wrap: wrap;
-  display: flex;
-  justify-content: center;
-}
-
 .controls {
   display: none;
   gap: 1rem;

styles/category.module.css

@@ -0,0 +1,15 @@
+.questList {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+}
+
+.blur {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}