feat(home): add skip button in pagination

iqbalpa · Jul 10, 2024 · 1713e90 · 1713e90
1 parent 3ad2aba
commit 1713e90
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 37 deletions.
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
@@ -1,63 +1,63 @@
-import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from 'react';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal } from 'lucide-react';
 
-import { cn } from "@/lib/utils"
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { cn } from '@/lib/utils';
+import { ButtonProps, buttonVariants } from '@/components/ui/button';
 
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
     role="navigation"
     aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
+    className={cn('mx-auto flex w-full justify-center', className)}
     {...props}
   />
-)
-Pagination.displayName = "Pagination"
+);
+Pagination.displayName = 'Pagination';
 
 const PaginationContent = React.forwardRef<
   HTMLUListElement,
-  React.ComponentProps<"ul">
+  React.ComponentProps<'ul'>
 >(({ className, ...props }, ref) => (
   <ul
     ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
+    className={cn('flex flex-row items-center gap-1', className)}
     {...props}
   />
-))
-PaginationContent.displayName = "PaginationContent"
+));
+PaginationContent.displayName = 'PaginationContent';
 
 const PaginationItem = React.forwardRef<
   HTMLLIElement,
-  React.ComponentProps<"li">
+  React.ComponentProps<'li'>
 >(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
+  <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
 
 type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
 
 const PaginationLink = ({
   className,
   isActive,
-  size = "icon",
+  size = 'icon',
   ...props
 }: PaginationLinkProps) => (
   <a
-    aria-current={isActive ? "page" : undefined}
+    aria-current={isActive ? 'page' : undefined}
     className={cn(
       buttonVariants({
-        variant: isActive ? "outline" : "ghost",
+        variant: isActive ? 'outline' : 'ghost',
         size,
       }),
-      className
+      className,
     )}
     {...props}
   />
-)
-PaginationLink.displayName = "PaginationLink"
+);
+PaginationLink.displayName = 'PaginationLink';
 
 const PaginationPrevious = ({
   className,
@@ -66,14 +66,14 @@ const PaginationPrevious = ({
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn('gap-1 pl-2.5', className)}
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
     <span>Previous</span>
   </PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
 
 const PaginationNext = ({
   className,
@@ -82,29 +82,61 @@ const PaginationNext = ({
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn('gap-1 pr-2.5', className)}
     {...props}
   >
     <span>Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationPreviousDouble = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn('gap-1', className)}
+    {...props}
+  >
+    <ChevronsLeft className="h-4 w-4" />
+    {/* <span>Previous</span> */}
+  </PaginationLink>
+);
+PaginationPreviousDouble.displayName = 'PaginationPreviousDouble';
+
+const PaginationNextDouble = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn('gap-1', className)}
+    {...props}
+  >
+    {/* <span>Next</span> */}
+    <ChevronsRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNextDouble.displayName = 'PaginationNextDouble';
 
 const PaginationEllipsis = ({
   className,
   ...props
-}: React.ComponentProps<"span">) => (
+}: React.ComponentProps<'span'>) => (
   <span
     aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
 
 export {
   Pagination,
@@ -114,4 +146,6 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-}
+  PaginationNextDouble,
+  PaginationPreviousDouble
+};
diff --git a/src/modules/home/home.tsx b/src/modules/home/home.tsx
@@ -14,6 +14,8 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationNextDouble,
+  PaginationPreviousDouble,
 } from '@/components/ui/pagination';
 
 const HomeModule: React.FC = () => {
@@ -38,7 +40,7 @@ const HomeModule: React.FC = () => {
     fetchMovies();
   }, [currentPage]);
 
-  const maxPage = Math.floor(948785 / 20);
+  const maxPage = 500;
   const handleClickPrev = () => {
     setCurrentPage((prevPage) => {
       if (prevPage === 1) {
@@ -64,6 +66,12 @@ const HomeModule: React.FC = () => {
 
       <Pagination>
         <PaginationContent>
+          <PaginationItem>
+            <PaginationPreviousDouble
+              onClick={() => setCurrentPage(1)}
+              className="hover:cursor-pointer"
+            />
+          </PaginationItem>
           <PaginationItem>
             <PaginationPrevious
               onClick={handleClickPrev}
@@ -89,6 +97,12 @@ const HomeModule: React.FC = () => {
               className="hover:cursor-pointer"
             />
           </PaginationItem>
+          <PaginationItem>
+            <PaginationNextDouble
+              onClick={() => setCurrentPage(maxPage)}
+              className="hover:cursor-pointer"
+            />
+          </PaginationItem>
         </PaginationContent>
       </Pagination>
     </div>