feat-602: improved tablet view

code100x · Aug 30, 2024 · fa831cf · fa831cf
1 parent 7b2ba69
commit fa831cf
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/apps/web/components/BlogAppbar.tsx b/apps/web/components/BlogAppbar.tsx
@@ -140,7 +140,7 @@ export const BlogAppbar = ({
             {track.title} ({problemIndex + 1} / {track.problems.length})
           </p>
           <div className="flex items-center space-x-2">
-            <CustomPagination allProblems={track.problems} track={track} problemIndex={problemIndex} />
+            <CustomPagination allProblems={track.problems} isAtHeader track={track} problemIndex={problemIndex} />
             <ModeToggle />
             <Link href={`/pdf/${track.id}/${track.problems[problemIndex]!.id}`} target="_blank">
               <Button variant="outline" className="ml-2 hidden bg-black text-white md:flex">

diff --git a/apps/web/components/CustomPagination.tsx b/apps/web/components/CustomPagination.tsx
@@ -5,19 +5,20 @@ import { Button } from "@repo/ui";
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 
 const CustomPagination = ({
-  allProblems,
-  track,
+  isAtHeader = false,
   problemIndex,
+  track,
 }: {
   allProblems: Problem[];
-  track: Track & { problems: Problem[] };
+  isAtHeader?: boolean;
   problemIndex: number;
+  track: Track & { problems: Problem[] };
 }) => {
   return (
     <div className="flex items-center justify-center space-x-2">
-      <PageToggle allProblems={track.problems} track={track} />
+      <PageToggle allProblems={track.problems} isAtHeader track={track} />
       <Link
-        prefetch={true}
+        prefetch
         href={problemIndex !== 0 ? `/tracks/${track.id}/${track.problems[problemIndex - 1]!.id}` : ``}
         style={{ cursor: problemIndex !== 0 ? "pointer" : "not-allowed" }}
       >
@@ -29,7 +30,7 @@ const CustomPagination = ({
           <div className="pr-2">
             <ChevronLeftIcon />
           </div>
-          Prev
+          <span className={isAtHeader ? "hidden lg:block" : ""}>Prev</span>
         </Button>
         <Button
           variant="outline"
@@ -56,7 +57,7 @@ const CustomPagination = ({
           className="hidden bg-black text-white md:flex"
           disabled={problemIndex + 1 !== track.problems.length ? false : true}
         >
-          Next
+          <span className={isAtHeader ? "hidden lg:block" : ""}>Next</span>
           <div className="pl-2">
             <ChevronRightIcon />
           </div>

diff --git a/apps/web/components/PageToggle.tsx b/apps/web/components/PageToggle.tsx
@@ -8,7 +8,15 @@ import { Track, Problem } from "@prisma/client";
 import { isLegacyViewMode } from "@repo/store";
 import { cn } from "@repo/ui/utils";
 
-export function PageToggle({ allProblems, track }: { allProblems: Problem[]; track: Track & { problems: Problem[] } }) {
+export function PageToggle({
+  allProblems,
+  isAtHeader = false,
+  track,
+}: {
+  allProblems: Problem[];
+  isAtHeader?: boolean;
+  track: Track & { problems: Problem[] };
+}) {
   const { trackIds }: { trackIds?: string[] } = useParams();
   const currentTrack = trackIds ? trackIds.join("/") : "";
 
@@ -22,7 +30,7 @@ export function PageToggle({ allProblems, track }: { allProblems: Problem[]; tra
           size={"lg"}
           variant={isLegacyMode ? "outline" : "secondary"}
         >
-          <span className="hidden md:block">Jump To</span>
+          <span className={`hidden ${isAtHeader ? "lg" : "md"}:block`}>Jump To</span>
           <ArrowUpRight className="size-4" />
         </Button>
       </DropdownMenuTrigger>