feat(screens): implement bookmark and profile screens

app/(tabs)/bookmark/page.tsx

@@ -1,7 +1,87 @@
-import React from "react";
+"use client";
 
-const page = () => {
-  return <div>page</div>;
+import React, { useState, useEffect } from "react";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { Bookmark, BookmarkCheck, ListFilter, MoveLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+interface Question {
+  id: number;
+  question: string;
+  options: Record<string, string>;
+}
+
+interface QuestionItemProps {
+  question: Question;
+}
+
+const QuestionItem = ({ question }: QuestionItemProps) => {
+  const [bookmark, setBookmark] = useState(true);
+  return (
+    <div className="border border-[#8abdff]/50 rounded-2xl p-4 flex  flex-col gap-7">
+      <h3 className="text-xl font-medium">
+        {question.id + 1}. {question.question}
+      </h3>
+      <div className="flex justify-between items-center">
+        <div></div>
+        <button onClick={() => setBookmark(!bookmark)}>
+          {bookmark ? (
+            <BookmarkCheck size={25} color="#113768" />
+          ) : (
+            <Bookmark size={25} color="#113768" />
+          )}
+        </button>
+      </div>
+      <div className="flex flex-col gap-4 items-start">
+        {Object.entries(question.options).map(([key, value]) => {
+          return (
+            <div key={key} className="flex items-center gap-3">
+              <span className="px-2 py-1 flex items-center rounded-full border font-medium text-sm">
+                {key.toUpperCase()}
+              </span>
+              <span className="option-description">{value}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
 };
 
-export default page;
+const BookmarkPage = () => {
+  const router = useRouter();
+  const [questions, setQuestions] = useState();
+
+  useEffect(() => {
+    fetch("/data/bookmark.json")
+      .then((res) => res.json())
+      .then((data) => setQuestions(data))
+      .catch((err) => console.error("Error loading questions: ", err));
+  }, []);
+
+  return (
+    <BackgroundWrapper>
+      <section className="min-h-screen flex flex-col justify-between">
+        <div className="flex-1 mb-20">
+          <div className="mx-8 mt-10 pb-6 space-y-6">
+            <button onClick={() => router.push("/home")}>
+              <MoveLeft size={30} color="#113768" />
+            </button>
+            <h1 className="text-4xl font-semibold text-[#113768]">Bookmark</h1>
+            <div className="flex justify-between">
+              <h3 className="text-xl font-semibold text-[#113768]">Recent</h3>
+              <button>
+                <ListFilter size={24} color="#113768" />
+              </button>
+            </div>
+            {questions?.map((question) => (
+              <QuestionItem key={question.id} question={question} />
+            ))}
+          </div>
+        </div>
+      </section>
+    </BackgroundWrapper>
+  );
+};
+
+export default BookmarkPage;

app/(tabs)/layout.tsx

@@ -5,13 +5,19 @@ import Link from "next/link";
 import { ReactNode } from "react";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
-import { House, LayoutGrid, Bookmark, CircleUser } from "lucide-react";
+import {
+  House,
+  LayoutGrid,
+  Bookmark,
+  CircleUser,
+  Settings,
+} from "lucide-react";
 
 const tabs = [
   { name: "Home", href: "/home", component: <House size={30} /> },
   { name: "Unit", href: "/unit", component: <LayoutGrid size={30} /> },
   { name: "Bookmark", href: "/bookmark", component: <Bookmark size={30} /> },
-  { name: "Profile", href: "/profile", component: <CircleUser size={30} /> },
+  { name: "Settings", href: "/settings", component: <Settings size={30} /> },
 ];
 
 export default function TabsLayout({ children }: { children: ReactNode }) {

app/(tabs)/profile/page.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const page = () => {
-  return <div>page</div>;
-};
-
-export default page;

app/(tabs)/settings/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { API_URL, getToken } from "@/lib/auth";
+import { MoveLeft, UserCircle2 } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+const SettingsPage = () => {
+  const router = useRouter();
+  const [userData, setUserData] = useState(null);
+
+  useEffect(() => {
+    async function fetchUser() {
+      try {
+        const token = await getToken();
+        if (!token) return;
+
+        const response = await fetch(`${API_URL}/me`, {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (response.ok) {
+          const fetchedUserData = await response.json();
+          setUserData(fetchedUserData);
+          console.log(fetchedUserData);
+        }
+      } catch (error) {
+        console.error("Error fetching user data: ", error);
+      }
+    }
+
+    fetchUser();
+  }, []);
+
+  return (
+    <BackgroundWrapper>
+      <section className="min-h-screen flex flex-col justify-between">
+        <div className="flex-1 mb-20">
+          <div className="mx-8 mt-10 pb-6 space-y-6">
+            <section className="flex justify-between">
+              <button onClick={() => router.push("/home")}>
+                <MoveLeft size={30} color="#113768" />
+              </button>
+              <h3 className="text-2xl font-semibold text-[#113768]">
+                Settings
+              </h3>
+              <button onClick={() => router.push("/profile")}>
+                <UserCircle2 size={30} color="#113768" />
+              </button>
+            </section>
+            <section className="flex flex-col gap-4">
+              <div className="flex gap-4 items-center">
+                <Avatar className="bg-[#113768] w-20 h-20">
+                  <AvatarFallback className="text-3xl text-white">
+                    {userData?.name
+                      ? userData.name.charAt(0).toUpperCase()
+                      : ""}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex flex-col ">
+                  <h1 className="font-semibold text-2xl">{userData?.name}</h1>
+                  <h3 className=" text-md">{userData?.email}</h3>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </section>
+    </BackgroundWrapper>
+  );
+};
+
+export default SettingsPage;

app/exam/pretest/page.tsx

@@ -79,21 +79,8 @@ export default function PretestPage() {
       </BackgroundWrapper>
     );
   }
-  const { isHydrated, isInitialized, currentExam } = useExam();
-
-  useEffect(() => {
-    console.log(
-      "hydrated:",
-      isHydrated,
-      "initialized:",
-      isInitialized,
-      "exam:",
-      currentExam
-    );
-  }, [isHydrated, isInitialized, currentExam]);
 
   function handleStartExam() {
-    console.log(id);
     setCurrentExam(examData);
     startExam();
     router.push(`/exam/${id}?time=${metadata?.metadata.duration}`);