From 7aa67c987e2426fea4f7385ffe2dbb4939f1322e Mon Sep 17 00:00:00 2001
From: Sanidhya Kumar Verma <sanidhya.verma12345@gmail.com>
Date: Fri, 22 Mar 2024 07:42:19 +0000
Subject: [PATCH] quests component added

---
 app/(main)/leaderboard/page.tsx |  2 ++
 app/(main)/learn/page.tsx       |  2 ++
 app/(main)/quests/page.tsx      | 32 +++-------------------
 app/(main)/shop/page.tsx        |  2 ++
 components/promo.tsx            |  4 +--
 components/quests.tsx           | 47 +++++++++++++++++++++++++++++++++
 constants.ts                    | 27 +++++++++++++++++++
 7 files changed, 84 insertions(+), 32 deletions(-)
 create mode 100644 components/quests.tsx

diff --git a/app/(main)/leaderboard/page.tsx b/app/(main)/leaderboard/page.tsx
index 8900aef..f59b473 100644
--- a/app/(main)/leaderboard/page.tsx
+++ b/app/(main)/leaderboard/page.tsx
@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 
 import { FeedWrapper } from "@/components/feed-wrapper";
 import { Promo } from "@/components/promo";
+import { Quests } from "@/components/quests";
 import { StickyWrapper } from "@/components/sticky-wrapper";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Separator } from "@/components/ui/separator";
@@ -38,6 +39,7 @@ const LeaderboardPage = async () => {
           hasActiveSubscription={isPro}
         />
         {!isPro && <Promo />}
+        <Quests points={userProgress.points} />
       </StickyWrapper>
 
       <FeedWrapper>
diff --git a/app/(main)/learn/page.tsx b/app/(main)/learn/page.tsx
index e5b3d33..df4a36d 100644
--- a/app/(main)/learn/page.tsx
+++ b/app/(main)/learn/page.tsx
@@ -2,6 +2,7 @@ import { redirect } from "next/navigation";
 
 import { FeedWrapper } from "@/components/feed-wrapper";
 import { Promo } from "@/components/promo";
+import { Quests } from "@/components/quests";
 import { StickyWrapper } from "@/components/sticky-wrapper";
 import { UserProgress } from "@/components/user-progress";
 import {
@@ -52,6 +53,7 @@ const LearnPage = async () => {
         />
 
         {!isPro && <Promo />}
+        <Quests points={userProgress.points} />
       </StickyWrapper>
       <FeedWrapper>
         <Header title={userProgress.activeCourse.title} />
diff --git a/app/(main)/quests/page.tsx b/app/(main)/quests/page.tsx
index 24ede8a..fdf4695 100644
--- a/app/(main)/quests/page.tsx
+++ b/app/(main)/quests/page.tsx
@@ -7,33 +7,7 @@ import { StickyWrapper } from "@/components/sticky-wrapper";
 import { Progress } from "@/components/ui/progress";
 import { UserProgress } from "@/components/user-progress";
 import { getUserProgress, getUserSubscription } from "@/db/queries";
-
-const quests = [
-  {
-    title: "Earn 20 XP",
-    value: 20,
-  },
-  {
-    title: "Earn 50 XP",
-    value: 50,
-  },
-  {
-    title: "Earn 100 XP",
-    value: 100,
-  },
-  {
-    title: "Earn 250 XP",
-    value: 250,
-  },
-  {
-    title: "Earn 500 XP",
-    value: 500,
-  },
-  {
-    title: "Earn 1000 XP",
-    value: 1000,
-  },
-];
+import { QUESTS } from "@/constants";
 
 const QuestsPage = async () => {
   const userProgressData = getUserProgress();
@@ -72,12 +46,12 @@ const QuestsPage = async () => {
           </p>
 
           <ul className="w-full">
-            {quests.map((quest) => {
+            {QUESTS.map((quest) => {
               const progress = (userProgress.points / quest.value) * 100;
 
               return (
                 <div
-                  className="flex items-center p-4 w-full gap-x-4"
+                  className="flex items-center p-4 w-full gap-x-4 border-t-2"
                   key={quest.title}
                 >
                   <Image
diff --git a/app/(main)/shop/page.tsx b/app/(main)/shop/page.tsx
index 0592420..85af9c3 100644
--- a/app/(main)/shop/page.tsx
+++ b/app/(main)/shop/page.tsx
@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 
 import { FeedWrapper } from "@/components/feed-wrapper";
 import { Promo } from "@/components/promo";
+import { Quests } from "@/components/quests";
 import { StickyWrapper } from "@/components/sticky-wrapper";
 import { UserProgress } from "@/components/user-progress";
 import { getUserProgress, getUserSubscription } from "@/db/queries";
@@ -33,6 +34,7 @@ const ShopPage = async () => {
         />
 
         {!isPro && <Promo />}
+        <Quests points={userProgress.points} />
       </StickyWrapper>
 
       <FeedWrapper>
diff --git a/components/promo.tsx b/components/promo.tsx
index fe01b6a..5528fdd 100644
--- a/components/promo.tsx
+++ b/components/promo.tsx
@@ -1,9 +1,7 @@
-"use client";
-
 import Image from "next/image";
+import Link from "next/link";
 
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
 
 export const Promo = () => {
   return (
diff --git a/components/quests.tsx b/components/quests.tsx
new file mode 100644
index 0000000..640baf9
--- /dev/null
+++ b/components/quests.tsx
@@ -0,0 +1,47 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { QUESTS } from "@/constants";
+
+type QuestsProps = { points: number };
+
+export const Quests = ({ points }: QuestsProps) => {
+  return (
+    <div className="border-2 rounded-xl p-4 space-y-4">
+      <div className="flex items-center justify-between w-full space-y-2">
+        <h3 className="font-bold text-lg">Quests</h3>
+
+        <Link href="/quests">
+          <Button size="sm" variant="primaryOutline">
+            View all
+          </Button>
+        </Link>
+      </div>
+
+      <ul className="w-full space-y-4">
+        {QUESTS.map((quest) => {
+          const progress = (points / quest.value) * 100;
+
+          return (
+            <div
+              className="flex items-center pb-4 w-full gap-x-3"
+              key={quest.title}
+            >
+              <Image src="/points.svg" alt="Points" width={40} height={40} />
+
+              <div className="flex flex-col gap-y-2 w-full">
+                <p className="text-neutral-700 text-sm font-bold">
+                  {quest.title}
+                </p>
+
+                <Progress value={progress} className="h-2" />
+              </div>
+            </div>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
diff --git a/constants.ts b/constants.ts
index 8594f9e..ee20725 100644
--- a/constants.ts
+++ b/constants.ts
@@ -1,3 +1,30 @@
 export const POINTS_TO_REFILL = 10;
 
 export const MAX_HEARTS = 5;
+
+export const QUESTS = [
+  {
+    title: "Earn 20 XP",
+    value: 20,
+  },
+  {
+    title: "Earn 50 XP",
+    value: 50,
+  },
+  {
+    title: "Earn 100 XP",
+    value: 100,
+  },
+  {
+    title: "Earn 250 XP",
+    value: 250,
+  },
+  {
+    title: "Earn 500 XP",
+    value: 500,
+  },
+  {
+    title: "Earn 1000 XP",
+    value: 1000,
+  },
+];