feat: wip

HereEast · Feb 15, 2025 · 10d84c8 · 10d84c8
1 parent f0c1604
commit 10d84c8
Showing 1 changed file with 58 additions and 47 deletions.
diff --git a/src/components/pages/questions/QuestionsNavigation.tsx b/src/components/pages/questions/QuestionsNavigation.tsx
@@ -1,11 +1,10 @@
 "use client";
 
-// import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import Link from "next/link";
+// import { useRouter } from "next/navigation";
 
 import { IQuestion } from "~/models/Question";
-// import { BASE_URL } from "~/utils/constants";
+import { BASE_URL } from "~/utils/constants";
 import { cn } from "~/utils/handlers";
 
 interface QuestionsNavProps {
@@ -17,7 +16,7 @@ export function QuestionsNavigation({
   questions,
   currentIndex,
 }: QuestionsNavProps) {
-  const router = useRouter();
+  // const router = useRouter();
 
   const lastIndex = questions.length - 1;
 
@@ -26,13 +25,25 @@ export function QuestionsNavigation({
   const nextQuestion =
     currentIndex === lastIndex ? questions[0] : questions[currentIndex + 1];
 
-  function handleClick(path: string) {
-    router.push(`${path}`, { scroll: false });
-  }
+  // function handleClick(path: string) {
+  //   router.push(`${path}`, { scroll: false });
+  // }
 
   return (
     <div className="grid grid-cols-2 justify-between gap-6">
-      <NavButton
+      <NavLink
+        url={`${BASE_URL}/questions/${prevQuestion.slug}`}
+        question={prevQuestion.body}
+        direction="prev"
+      />
+
+      <NavLink
+        url={`${BASE_URL}/questions/${nextQuestion.slug}`}
+        question={nextQuestion.body}
+        direction="next"
+      />
+
+      {/* <NavButton
         onClick={() => handleClick(`/questions/${prevQuestion.slug}`)}
         question={prevQuestion.body}
         direction="prev"
@@ -42,58 +53,28 @@ export function QuestionsNavigation({
         onClick={() => handleClick(`/questions/${nextQuestion.slug}`)}
         question={nextQuestion.body}
         direction="next"
-      />
+      /> */}
     </div>
   );
 }
 
 // Nav Link
-interface NavButtonProps {
-  onClick: () => void;
-  direction: "prev" | "next";
-  question: string;
-}
-
-function NavButton({ onClick, direction, question }: NavButtonProps) {
-  return (
-    <button
-      onClick={onClick}
-      className="group/questions-nav rounded-xl border p-6"
-    >
-      <span
-        className={cn(
-          "flex flex-col gap-1",
-          direction === "prev" ? "text-left" : "text-right",
-        )}
-      >
-        <span className="text-xs uppercase text-stone-400">
-          {direction === "prev" ? "Prev" : "Next"}
-        </span>
-        <span className="text-base leading-tight underline group-hover/questions-nav:no-underline group-hover/questions-nav:opacity-50">
-          {question}
-        </span>
-      </span>
-    </button>
-  );
-}
-
-// interface QuestionsNavLinkProps {
-//   url: string;
+// interface NavButtonProps {
+//   onClick: () => void;
 //   direction: "prev" | "next";
 //   question: string;
 // }
 
-// function QuestionsNavLink({ url, direction, question }: QuestionsNavLinkProps) {
+// function NavButton({ onClick, direction, question }: NavButtonProps) {
 //   return (
-//     <Link
-//       href={url}
+//     <button
+//       onClick={onClick}
 //       className="group/questions-nav rounded-xl border p-6"
-//       scroll={false}
 //     >
 //       <span
 //         className={cn(
 //           "flex flex-col gap-1",
-//           direction === "next" && "text-right",
+//           direction === "prev" ? "text-left" : "text-right",
 //         )}
 //       >
 //         <span className="text-xs uppercase text-stone-400">
@@ -103,6 +84,36 @@ function NavButton({ onClick, direction, question }: NavButtonProps) {
 //           {question}
 //         </span>
 //       </span>
-//     </Link>
+//     </button>
 //   );
 // }
+
+interface NavLinkProps {
+  url: string;
+  direction: "prev" | "next";
+  question: string;
+}
+
+function NavLink({ url, direction, question }: NavLinkProps) {
+  return (
+    <Link
+      href={url}
+      className="group/questions-nav rounded-xl border p-6"
+      scroll={false}
+    >
+      <span
+        className={cn(
+          "flex flex-col gap-1",
+          direction === "next" && "text-right",
+        )}
+      >
+        <span className="text-xs uppercase text-stone-400">
+          {direction === "prev" ? "Prev" : "Next"}
+        </span>
+        <span className="text-base leading-tight underline group-hover/questions-nav:no-underline group-hover/questions-nav:opacity-50">
+          {question}
+        </span>
+      </span>
+    </Link>
+  );
+}