feat-602: Added leagacy mode button on Blog Page

.prettierrc

@@ -1,8 +1,9 @@
 {
   "singleQuote": false,
-  "printWidth":120,
+  "printWidth": 120,
   "bracketSpacing": true,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "semi": true
-}
+  "semi": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

apps/web/app/pdf/[...pdfId]/page.tsx

@@ -26,7 +26,9 @@ export default async function TrackComponent({ params }: { params: { pdfId: stri
   if (problemDetails?.notionDocId && trackDetails?.problems) {
     // notionRecordMaps = await notion.getPage(problemDetails.notionDocId);
     notionRecordMaps = await Promise.all(
-      trackDetails.problems.map(async (problem: any) => await notion.getPage((await getProblem(problem.id))?.notionDocId!))
+      trackDetails.problems.map(
+        async (problem: any) => await notion.getPage((await getProblem(problem.id))?.notionDocId!)
+      )
     );
   }
 
@@ -36,20 +38,20 @@ export default async function TrackComponent({ params }: { params: { pdfId: stri
   }
   if (trackDetails && problemDetails) {
     return (
-        <div>
-          {trackDetails?.problems.map((problem: any, i: number) => (
-            <LessonView
-              isPdfRequested={true}
-              track={trackDetails}
-              problem={{
-                ...problemDetails,
-                notionRecordMap: notionRecordMaps[i],
-              }}
-              key={i}
-            />
-          ))}
-          <Print />
-        </div>
+      <div>
+        {trackDetails?.problems.map((problem: any, i: number) => (
+          <LessonView
+            isPdfRequested
+            track={trackDetails}
+            problem={{
+              ...problemDetails,
+              notionRecordMap: notionRecordMaps[i],
+            }}
+            key={i}
+          />
+        ))}
+        <Print />
+      </div>
     );
   }
 }

apps/web/app/tracks/[...trackIds]/page.tsx

@@ -87,6 +87,7 @@ export default async function TrackComponent({ params }: { params: { trackIds: s
     return (
       <LessonView
         showAppBar
+        showPagination
         track={trackDetails}
         problem={{
           ...problemDetails,

apps/web/components/Blog.tsx

@@ -1,40 +1,61 @@
 "use client";
+import { useRecoilValue } from "recoil";
+
 import { Problem, Track } from "@prisma/client";
+import { isLegacyViewMode } from "@repo/store";
+
 import { BlogAppbar } from "./BlogAppbar";
 import { NotionRenderer } from "./NotionRenderer";
 import useMountStatus from "../hooks/useMountStatus";
 import TrackTools from "./TrackTools";
+import CustomPagination from "./CustomPagination";
 
 export const Blog = ({
   problem,
   track,
+  showAppBar,
+  showPagination,
   isPdfRequested,
   problemIndex,
 }: {
   problem: Problem & { notionRecordMap: any };
   track: Track & { problems: Problem[] };
-  showAppBar: Boolean;
-  isPdfRequested?: Boolean;
+  showAppBar?: boolean;
+  showPagination?: boolean;
+  isPdfRequested?: boolean;
   problemIndex: number;
 }) => {
   const mounted = useMountStatus();
+  const isLegacyMode = useRecoilValue(isLegacyViewMode);
 
   if (isPdfRequested == undefined || !isPdfRequested) {
     if (!mounted) {
       return null;
     }
   }
 
-  return (
-    <div>
-      <NotionRenderer recordMap={problem.notionRecordMap} />
-      <div className="fixed top-0 w-full">
-        <BlogAppbar problem={problem} track={track} problemIndex={problemIndex} />
+  const renderBlog = () =>
+    isLegacyMode ? (
+      <div className="break-after-page">
+        {showAppBar && <BlogAppbar problem={problem} track={track} problemIndex={problemIndex} />}
+        <NotionRenderer recordMap={problem.notionRecordMap} />
+        {showPagination && (
+          <div className="justify-center pt-2">
+            <CustomPagination allProblems={track.problems} track={track} problemIndex={problemIndex} />
+          </div>
+        )}
       </div>
-      <div className="fixed bottom-0 itemsc-center justify-center mx-auto w-full">
-        <TrackTools allProblems={track.problems} track={track} problemIndex={problemIndex} />
+    ) : (
+      <div>
+        <NotionRenderer recordMap={problem.notionRecordMap} />
+        <div className="fixed top-0 w-full">
+          <BlogAppbar problem={problem} track={track} problemIndex={problemIndex} />
+        </div>
+        <div className="itemsc-center fixed bottom-0 mx-auto w-full justify-center">
+          <TrackTools allProblems={track.problems} track={track} problemIndex={problemIndex} />
+        </div>
       </div>
-    </div>
-  );
+    );
+
+  return renderBlog();
 };
-