diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index ea40d19..cb6aa6a 100644
--- 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'>) => (
-)
-Pagination.displayName = "Pagination"
+);
+Pagination.displayName = 'Pagination';
const PaginationContent = React.forwardRef<
HTMLUListElement,
- React.ComponentProps<"ul">
+ React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
-))
-PaginationContent.displayName = "PaginationContent"
+));
+PaginationContent.displayName = 'PaginationContent';
const PaginationItem = React.forwardRef<
HTMLLIElement,
- React.ComponentProps<"li">
+ React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
-
-))
-PaginationItem.displayName = "PaginationItem"
+
+));
+PaginationItem.displayName = 'PaginationItem';
type PaginationLinkProps = {
- isActive?: boolean
-} & Pick &
- React.ComponentProps<"a">
+ isActive?: boolean;
+} & Pick &
+ React.ComponentProps<'a'>;
const PaginationLink = ({
className,
isActive,
- size = "icon",
+ size = 'icon',
...props
}: PaginationLinkProps) => (
-)
-PaginationLink.displayName = "PaginationLink"
+);
+PaginationLink.displayName = 'PaginationLink';
const PaginationPrevious = ({
className,
@@ -66,14 +66,14 @@ const PaginationPrevious = ({
Previous
-)
-PaginationPrevious.displayName = "PaginationPrevious"
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
const PaginationNext = ({
className,
@@ -82,29 +82,61 @@ const PaginationNext = ({
Next
-)
-PaginationNext.displayName = "PaginationNext"
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationPreviousDouble = ({
+ className,
+ ...props
+}: React.ComponentProps) => (
+
+
+ {/* Previous */}
+
+);
+PaginationPreviousDouble.displayName = 'PaginationPreviousDouble';
+
+const PaginationNextDouble = ({
+ className,
+ ...props
+}: React.ComponentProps) => (
+
+ {/* Next */}
+
+
+);
+PaginationNextDouble.displayName = 'PaginationNextDouble';
const PaginationEllipsis = ({
className,
...props
-}: React.ComponentProps<"span">) => (
+}: React.ComponentProps<'span'>) => (
More pages
-)
-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
index b4d9d1d..1cac40e 100644
--- 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 = () => {
+
+ setCurrentPage(1)}
+ className="hover:cursor-pointer"
+ />
+
{
className="hover:cursor-pointer"
/>
+
+ setCurrentPage(maxPage)}
+ className="hover:cursor-pointer"
+ />
+