diff --git a/apps/app/src/app/questions/[technology]/[page]/page.tsx b/apps/app/src/app/questions/[technology]/[page]/page.tsx
new file mode 100644
index 00000000..0ed431a6
--- /dev/null
+++ b/apps/app/src/app/questions/[technology]/[page]/page.tsx
@@ -0,0 +1,40 @@
+import { redirect } from "next/navigation";
+import { QuestionItem } from "../../../../components/QuestionItem/QuestionItem";
+import { QuestionsPagination } from "../../../../components/QuestionsPagination";
+import { PAGE_SIZE } from "../../../../lib/constants";
+import { technologies } from "../../../../lib/technologies";
+import { getAllQuestions } from "../../../../services/questions.service";
+
+export default async function QuestionsPage({
+ params,
+}: {
+ params: { technology: string; page: string };
+}) {
+ const page = parseInt(params.page);
+
+ if (!technologies.includes(params.technology) || isNaN(page)) {
+ return redirect("/");
+ }
+
+ const { data } = await getAllQuestions({
+ category: params.technology,
+ limit: PAGE_SIZE,
+ offset: (page - 1) * PAGE_SIZE,
+ });
+
+ return (
+
+ {data.data.map(({ id, question, _levelId, acceptedAt, votesCount }) => (
+
+ ))}
+
+
+ );
+}
diff --git a/apps/app/src/app/questions/[technology]/page.tsx b/apps/app/src/app/questions/[technology]/page.tsx
index 67efac0a..1589989a 100644
--- a/apps/app/src/app/questions/[technology]/page.tsx
+++ b/apps/app/src/app/questions/[technology]/page.tsx
@@ -1,27 +1,5 @@
import { redirect } from "next/navigation";
-import { QuestionItem } from "../../../components/QuestionItem/QuestionItem";
-import { technologies } from "../../../lib/technologies";
-import { getAllQuestions } from "../../../services/questions.service";
-export default async function QuestionsPage({ params }: { params: { technology: string } }) {
- if (!technologies.includes(params.technology)) {
- return redirect("/");
- }
-
- const { data } = await getAllQuestions({ category: params.technology, limit: 20 });
-
- return (
-
- {data.data.map(({ id, question, _levelId, acceptedAt, votesCount }) => (
-
- ))}
-
- );
-};
+export default function TechnologyPage({ params }: { params: { technology: string } }) {
+ return redirect(`/questions/${params.technology}/1`);
+}
diff --git a/apps/app/src/app/questions/layout.tsx b/apps/app/src/app/questions/layout.tsx
index 1abe46ac..6d1f9f47 100644
--- a/apps/app/src/app/questions/layout.tsx
+++ b/apps/app/src/app/questions/layout.tsx
@@ -7,7 +7,7 @@ const QuestionsPageLayout = ({ children }: { readonly children: ReactNode }) =>
<>
- {children}
+ {children}
>
diff --git a/apps/app/src/app/questions/page.tsx b/apps/app/src/app/questions/page.tsx
index 7f1cad0a..4fdc893e 100644
--- a/apps/app/src/app/questions/page.tsx
+++ b/apps/app/src/app/questions/page.tsx
@@ -1,5 +1,5 @@
import { redirect } from "next/navigation";
export default function QuestionsPage() {
- return redirect("/questions/js");
+ return redirect("/questions/js/1");
}
diff --git a/apps/app/src/components/ActiveLink.tsx b/apps/app/src/components/ActiveLink.tsx
index a356a7c6..2bface36 100644
--- a/apps/app/src/components/ActiveLink.tsx
+++ b/apps/app/src/components/ActiveLink.tsx
@@ -18,7 +18,7 @@ export const ActiveLink = ({
...rest
}: ActiveLinkProps) => {
const pathname = usePathname();
- const isActive = href === pathname;
+ const isActive = pathname?.startsWith(href.toString());
return (
diff --git a/apps/app/src/components/QuestionsPagination.tsx b/apps/app/src/components/QuestionsPagination.tsx
new file mode 100644
index 00000000..c3b2804f
--- /dev/null
+++ b/apps/app/src/components/QuestionsPagination.tsx
@@ -0,0 +1,26 @@
+import { PAGE_SIZE } from "../lib/constants";
+import { ActiveLink } from "./ActiveLink";
+
+type QuestionsPaginationProps = Readonly<{
+ technology: string;
+ total: number;
+}>;
+
+export const QuestionsPagination = ({ technology, total }: QuestionsPaginationProps) => {
+ const pages = Math.ceil(total / PAGE_SIZE);
+
+ return (
+
+ {Array.from({ length: pages }).map((_, i) => (
+
+ {i + 1}
+
+ ))}
+
+ );
+};
diff --git a/apps/app/src/lib/constants.ts b/apps/app/src/lib/constants.ts
new file mode 100644
index 00000000..bfab9067
--- /dev/null
+++ b/apps/app/src/lib/constants.ts
@@ -0,0 +1 @@
+export const PAGE_SIZE = 20;