Feat/hng 93 implement pagination for career page

app/components/ui/pagination.tsx

@@ -0,0 +1,120 @@
+import { ButtonProps } from "@react-email/components";
+import { buttonVariants } from "app/components/ui/button";
+import { cn } from "app/lib/utils/cn";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+const Pagination = ({
+  className,
+  ...properties
+}: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...properties}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...properties }, reference) => (
+  <ul
+    ref={reference}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...properties}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...properties }, reference) => (
+  <li ref={reference} className={cn("", className)} {...properties} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProperties = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...properties
+}: PaginationLinkProperties) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...properties}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  ...properties
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...properties}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+  className,
+  ...properties
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...properties}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+  className,
+  ...properties
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...properties}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

app/routes/career.tsx

@@ -0,0 +1,185 @@
+import { LoaderFunction } from "@remix-run/node";
+import { json, Link, useLoaderData, useSearchParams } from "@remix-run/react";
+import { useEffect, useState } from "react";
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "~/components/ui/pagination";
+
+interface JobListing {
+  id: string;
+  title: string;
+}
+
+interface LoaderData {
+  jobListings: {
+    items: JobListing[];
+    totalPages: number;
+  };
+}
+
+const dummyJobListings = (page: number) => {
+  const totalItems = 50;
+  const itemsPerPage = 10;
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const startIndex = (page - 1) * itemsPerPage;
+  const items = Array.from({ length: itemsPerPage }, (_, index) => ({
+    id: (startIndex + index + 1).toString(),
+    title: `Job Listing ${startIndex + index + 1}`,
+  }));
+
+  return { items, totalPages };
+};
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const url = new URL(request.url);
+  const page = Number.parseInt(url.searchParams.get("page") || "1", 10);
+  const jobListings = dummyJobListings(page);
+
+  if (Number.isNaN(page) || page < 1 || page > jobListings.totalPages) {
+    throw new Response("Page not found", { status: 404 });
+  }
+
+  return json({ jobListings });
+};
+
+const CareerPage: React.FC = () => {
+  const { jobListings } = useLoaderData<LoaderData>();
+  const [searchParameters] = useSearchParams();
+  const currentPage = Number.parseInt(searchParameters.get("page") || "1", 10);
+  const totalPages = jobListings.totalPages;
+
+  const [maxPagesToShow, setMaxPagesToShow] = useState(3);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      if (width <= 400) {
+        setMaxPagesToShow(0);
+      } else if (width <= 435) {
+        setMaxPagesToShow(1);
+      } else if (width <= 450) {
+        setMaxPagesToShow(2);
+      } else if (width <= 470) {
+        setMaxPagesToShow(3);
+      } else if (width <= 1024) {
+        setMaxPagesToShow(5);
+      } else {
+        setMaxPagesToShow(totalPages);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, [totalPages]);
+
+  const generatePageNumbers = (): (number | string)[] => {
+    const pageNumbers: (number | string)[] = [];
+    const half = Math.floor(maxPagesToShow / 2);
+
+    let start = Math.max(1, currentPage - half);
+    let end = Math.min(totalPages, currentPage + half);
+
+    if (currentPage - half <= 0) {
+      end = Math.min(totalPages, maxPagesToShow);
+    }
+
+    if (currentPage + half > totalPages) {
+      start = Math.max(1, totalPages - maxPagesToShow + 1);
+    }
+
+    for (let index = start; index <= end; index++) {
+      pageNumbers.push(index);
+    }
+
+    if (start > 1) {
+      if (start > 2) {
+        pageNumbers.unshift(1, "ellipsis");
+      } else {
+        pageNumbers.unshift(1);
+      }
+    }
+
+    if (end < totalPages - 1) {
+      pageNumbers.push("ellipsis", totalPages);
+    } else if (end === totalPages - 1) {
+      pageNumbers.push(totalPages);
+    }
+
+    return pageNumbers;
+  };
+
+  return (
+    <div className="container mx-auto px-4">
+      <h1>Career Page</h1>
+      <div>
+        {jobListings.items.map((job) => (
+          <div key={job.id}>{job.title}</div>
+        ))}
+      </div>
+      {jobListings.totalPages > 1 && (
+        <Pagination className="my-4 flex justify-center font-[inter]">
+          <PaginationContent className="flex items-center justify-between p-0">
+            <PaginationItem className="mx-1">
+              <Link
+                to={`?page=${Math.max(currentPage - 1, 1)}`}
+                className={`flex items-center gap-2 space-x-1 rounded-md py-2 pl-2.5 pr-4 ${
+                  currentPage === 1
+                    ? "pointer-events-none text-gray-400 opacity-50"
+                    : "hover:bg-[#F4F4F5]"
+                }`}
+              >
+                <PaginationPrevious size={250} />
+              </Link>
+            </PaginationItem>
+            {generatePageNumbers().map((page, index) =>
+              page === "ellipsis" ? (
+                <PaginationItem key={index}>
+                  <PaginationEllipsis className="flex items-center" />
+                </PaginationItem>
+              ) : (
+                <PaginationItem key={index} className="mx-1">
+                  <Link
+                    to={`?page=${page}`}
+                    className={`rounded-md px-3 py-2 text-[14px] ${
+                      currentPage === page
+                        ? "bg-orange-500 text-white"
+                        : `hover:bg-[#F4F4F5] ${
+                            maxPagesToShow === 0 ? "hidden" : ""
+                          }`
+                    } `}
+                  >
+                    <PaginationLink size={20}>{page}</PaginationLink>
+                  </Link>
+                </PaginationItem>
+              ),
+            )}
+            <PaginationItem className="mx-1">
+              <Link
+                to={`?page=${Math.min(currentPage + 1, totalPages)}`}
+                className={`flex items-center gap-2 space-x-1 rounded-md py-2 pl-2.5 pr-4 ${
+                  currentPage === totalPages
+                    ? "pointer-events-none text-[#CBD5E1]"
+                    : "hover:bg-[#F4F4F5]"
+                }`}
+                aria-disabled={currentPage === totalPages}
+              >
+                <PaginationNext size={250} />
+              </Link>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
+    </div>
+  );
+};
+
+export default CareerPage;

package.json

@@ -38,6 +38,7 @@
     "clsx": "^2.1.1",
     "isbot": "^4.4.0",
     "lucide-react": "^0.408.0",
+    "pnpm": "^9.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-email": "^2.1.5",