sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-10-06 22:51:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 12m20s
Details

Browse Source
This commit is contained in:
i701
2025-09-20 20:42:14 +05:00
parent 5277c13fb7
commit a60e9a9c85
45 changed files with 3539 additions and 3041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
components/pagination.tsx
View File

@@ -6,108 +6,108 @@ import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
type PaginationProps = {
totalPages: number;
currentPage: number;
maxVisible?: number;
totalPages: number;
currentPage: number;
maxVisible?: number;
};
export default function Pagination({
totalPages,
currentPage,
maxVisible = 4,
totalPages,
currentPage,
maxVisible = 4,
}: PaginationProps) {
const searchParams = useSearchParams();
const activePage = searchParams.get("page") ?? 1;
const router = useRouter();
const searchParams = useSearchParams();
const activePage = searchParams.get("page") ?? 1;
const router = useRouter();
const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
useEffect(() => {
const params = Object.fromEntries(
Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
);
setQueryParams(params);
}, [searchParams]);
useEffect(() => {
const params = Object.fromEntries(
Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
);
setQueryParams(params);
}, [searchParams]);
useEffect(() => {
if (!searchParams.has("page")) {
router.replace(`?page=1${IncludeQueries()}`);
}
});
useEffect(() => {
if (!searchParams.has("page")) {
router.replace(`?page=1${IncludeQueries()}`);
}
});
function IncludeQueries() {
return Object.entries(queryParams)
.map(([key, value]) => `&${key}=${value}`)
.join("");
}
function IncludeQueries() {
return Object.entries(queryParams)
.map(([key, value]) => `&${key}=${value}`)
.join("");
}
const generatePageNumbers = (): (number | string)[] => {
const halfVisible = Math.floor(maxVisible / 2);
let startPage = Math.max(currentPage - halfVisible, 1);
const endPage = Math.min(startPage + maxVisible - 1, totalPages);
const generatePageNumbers = (): (number | string)[] => {
const halfVisible = Math.floor(maxVisible / 2);
let startPage = Math.max(currentPage - halfVisible, 1);
const endPage = Math.min(startPage + maxVisible - 1, totalPages);
if (endPage - startPage + 1 < maxVisible) {
startPage = Math.max(endPage - maxVisible + 1, 1);
}
if (endPage - startPage + 1 < maxVisible) {
startPage = Math.max(endPage - maxVisible + 1, 1);
}
const pageNumbers: (number | string)[] = [];
const pageNumbers: (number | string)[] = [];
if (startPage > 1) {
pageNumbers.push(1);
if (startPage > 2) pageNumbers.push("...");
}
if (startPage > 1) {
pageNumbers.push(1);
if (startPage > 2) pageNumbers.push("...");
}
for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(i);
}
for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(i);
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) pageNumbers.push("...");
pageNumbers.push(totalPages);
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) pageNumbers.push("...");
pageNumbers.push(totalPages);
}
return pageNumbers;
};
return pageNumbers;
};
const pageNumbers = generatePageNumbers();
const pageNumbers = generatePageNumbers();
if (totalPages <= 1) {
return null;
}
if (totalPages <= 1) {
return null;
}
return (
<div className="flex items-center justify-center space-x-2 my-4">
{currentPage > 1 && (
<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
<Button variant="secondary" className="flex items-center gap-2">
<ArrowLeftIcon className="h-4 w-4" />
</Button>
</Link>
)}
return (
<div className="flex items-center justify-center space-x-2 my-4">
{currentPage > 1 && (
<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
<Button variant="secondary" className="flex items-center gap-2">
<ArrowLeftIcon className="h-4 w-4" />
</Button>
</Link>
)}
{pageNumbers.map((page) => (
<React.Fragment key={`${page}`}>
{typeof page === "number" ? (
<Link href={`?page=${page}${IncludeQueries()}`}>
<Button
variant={Number(activePage) === page ? "default" : "outline"}
>
{page}
</Button>
</Link>
) : (
<span className="px-2">...</span>
)}
</React.Fragment>
))}
{pageNumbers.map((page) => (
<React.Fragment key={`${page}`}>
{typeof page === "number" ? (
<Link href={`?page=${page}${IncludeQueries()}`}>
<Button
variant={Number(activePage) === page ? "default" : "outline"}
>
{page}
</Button>
</Link>
) : (
<span className="px-2">...</span>
)}
</React.Fragment>
))}
{currentPage < totalPages && (
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
<Button variant="secondary" className="flex items-center gap-2">
<ArrowRightIcon className="h-4 w-4" />
</Button>
</Link>
)}
</div>
);
{currentPage < totalPages && (
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
<Button variant="secondary" className="flex items-center gap-2">
<ArrowRightIcon className="h-4 w-4" />
</Button>
</Link>
)}
</div>
);
}