feat: wip

HereEast · Feb 15, 2025 · db8d7f6 · db8d7f6
1 parent 24a20d9
commit db8d7f6
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 15 deletions.
diff --git a/src/components/QuestionsNavigation.tsx b/src/components/QuestionsNavigation.tsx
@@ -1,7 +1,11 @@
-import Link from "next/link";
+"use client";
+
+// import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 import { IQuestion } from "~/models/Question";
-import { BASE_URL } from "~/utils/constants";
+// import { BASE_URL } from "~/utils/constants";
 import { cn } from "~/utils/handlers";
 
 interface QuestionsNavProps {
@@ -13,23 +17,29 @@ export function QuestionsNavigation({
   questions,
   currentIndex,
 }: QuestionsNavProps) {
+  const router = useRouter();
+
   const lastIndex = questions.length - 1;
 
   const prevQuestion =
     currentIndex === 0 ? questions[lastIndex] : questions[currentIndex - 1];
   const nextQuestion =
     currentIndex === lastIndex ? questions[0] : questions[currentIndex + 1];
 
+  function handleClick(path: string) {
+    router.push(`${path}`, { scroll: false });
+  }
+
   return (
     <div className="grid grid-cols-2 justify-between gap-6">
-      <QuestionsNavLink
-        url={`${BASE_URL}/questions/${prevQuestion.slug}`}
+      <NavButton
+        onClick={() => handleClick(`/questions/${prevQuestion.slug}`)}
         question={prevQuestion.body}
         direction="prev"
       />
 
-      <QuestionsNavLink
-        url={`${BASE_URL}/questions/${nextQuestion.slug}`}
+      <NavButton
+        onClick={() => handleClick(`/questions/${nextQuestion.slug}`)}
         question={nextQuestion.body}
         direction="next"
       />
@@ -38,19 +48,22 @@ export function QuestionsNavigation({
 }
 
 // Nav Link
-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} className="group/questions-nav rounded-xl border p-6">
+    <button
+      onClick={onClick}
+      className="group/questions-nav rounded-xl border p-6"
+    >
       <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">
@@ -60,6 +73,36 @@ function QuestionsNavLink({ url, direction, question }: QuestionsNavLinkProps) {
           {question}
         </span>
       </span>
-    </Link>
+    </button>
   );
 }
+
+// interface QuestionsNavLinkProps {
+//   url: string;
+//   direction: "prev" | "next";
+//   question: string;
+// }
+
+// function QuestionsNavLink({ url, direction, question }: QuestionsNavLinkProps) {
+//   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>
+//   );
+// }
diff --git a/src/components/layouts/QuestionPage.tsx b/src/components/layouts/QuestionPage.tsx
@@ -33,11 +33,12 @@ export async function QuestionPage({ questionSlug }: QuestionPageProps) {
   return (
     <PageContainer className="max-w-4xl">
       {answers && question && (
-        <div>
-          <div className="mb-2">
+        <>
+          <div className="mb-4">
             <Link
               href={`${BASE_URL}/questions`}
               className="underline hover:no-underline hover:opacity-50"
+              scroll={false}
             >
               All Questions
             </Link>
@@ -71,7 +72,7 @@ export async function QuestionPage({ questionSlug }: QuestionPageProps) {
             questions={questions}
             currentIndex={currentIndex}
           />
-        </div>
+        </>
       )}
     </PageContainer>
   );