ben.carrasco/prowler
1
0 Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-10-30 15:24:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add functionality to the Pagination component

Browse Source
This commit is contained in:
Pablo Lara committed 2024-08-09 11:54:58 +02:00
1 parent bed2b1e7f7
commit 5bb3c012c9
8 files changed
+100 -180
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/ui/index.ts
-1
View File
@@ -1,7 +1,6 @@
export * from "./alert/Alert";
export * from "./dialog/Dialog";
export * from "./header/Header";
export * from "./pagination/Pagination";
export * from "./select/Select";
export * from "./sidebar";
export * from "./table/StatusBadge";
components/ui/pagination/Pagination.tsx
-95
View File
@@ -1,95 +0,0 @@
"use client";
import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";
import React from "react";
interface Props {
totalPages: number;
currentPage: number;
nextPage?: string;
}
export const Pagination = ({ totalPages, currentPage }: Props) => {
const pathname = usePathname();
const searchParams = useSearchParams();
// const currentPage = searchParams["page"] ?? "1";
const createPageUrl = (pageNumber: number | string) => {
const params = new URLSearchParams(searchParams);
if (pageNumber === "...") return `${pathname}?${params.toString()}`;
if (+pageNumber <= 0) {
return `${pathname}`;
}
if (+pageNumber > totalPages) {
return `${pathname}?${params.toString()}`;
}
params.set("page", pageNumber.toString());
return `${pathname}?${params.toString()}`;
};
console.log(pathname, searchParams, currentPage);
return (
<div className="flex justify-center">
<nav aria-label="Page navigation example">
<ul className="flex list-style-none">
<li className="page-item">
<Link
className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
href={createPageUrl(currentPage - 1)}
aria-disabled="true"
>
Previous
</Link>
</li>
<li className="page-item">
<a
className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
href="#"
>
1
</a>
</li>
<li className="page-item active">
<a
className="page-link relative block py-1.5 px-3 border-0 bg-blue-600 outline-none transition-all duration-300 rounded text-white hover:text-white hover:bg-blue-600 shadow-md focus:shadow-md"
href="#"
>
2 <span className="visually-hidden"></span>
</a>
</li>
<li className="page-item">
<a
className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
href="#"
>
3
</a>
</li>
<li className="page-item">
<a
className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
href="#"
>
...
</a>
</li>
<li className="page-item">
<Link
className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
href={"#"}
>
Next
</Link>
</li>
</ul>
</nav>
</div>
);
};