diff --git a/app/(protected)/admin/users/user-list.tsx b/app/(protected)/admin/users/user-list.tsx index ea2fafb..06aa2bb 100644 --- a/app/(protected)/admin/users/user-list.tsx +++ b/app/(protected)/admin/users/user-list.tsx @@ -1,10 +1,8 @@ "use client"; import { useState } from "react"; -import Link from "next/link"; -import { Pagination } from "@nextui-org/pagination"; import { User } from "@prisma/client"; -import { ArrowLeft, ArrowRight, PenLine, RefreshCwIcon } from "lucide-react"; +import { PenLine, RefreshCwIcon } from "lucide-react"; import useSWR, { useSWRConfig } from "swr"; import { siteConfig } from "@/config/site"; @@ -19,7 +17,6 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; -import { PaginationWrapper } from "@/components/ui/pagination"; import { Skeleton } from "@/components/ui/skeleton"; import { Table, @@ -39,6 +36,7 @@ import StatusDot from "@/components/dashboard/status-dot"; import { FormType } from "@/components/forms/record-form"; import { UserForm } from "@/components/forms/user-form"; import { EmptyPlaceholder } from "@/components/shared/empty-placeholder"; +import { PaginationWrapper } from "@/components/shared/pagination"; import CountUpFn from "../../../../components/dashboard/count-up"; diff --git a/app/(protected)/dashboard/records/record-list.tsx b/app/(protected)/dashboard/records/record-list.tsx index 3ad3982..5c89bad 100644 --- a/app/(protected)/dashboard/records/record-list.tsx +++ b/app/(protected)/dashboard/records/record-list.tsx @@ -18,7 +18,6 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; -import { PaginationWrapper } from "@/components/ui/pagination"; import { Skeleton } from "@/components/ui/skeleton"; import { Table, @@ -39,6 +38,7 @@ import StatusDot from "@/components/dashboard/status-dot"; import { FormType, RecordForm } from "@/components/forms/record-form"; import { EmptyPlaceholder } from "@/components/shared/empty-placeholder"; import { LinkPreviewer } from "@/components/shared/link-previewer"; +import { PaginationWrapper } from "@/components/shared/pagination"; export interface RecordListProps { user: Pick; diff --git a/app/(protected)/dashboard/urls/url-list.tsx b/app/(protected)/dashboard/urls/url-list.tsx index 3cff0e5..2e93c16 100644 --- a/app/(protected)/dashboard/urls/url-list.tsx +++ b/app/(protected)/dashboard/urls/url-list.tsx @@ -23,7 +23,6 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; -import { PaginationWrapper } from "@/components/ui/pagination"; import { Skeleton } from "@/components/ui/skeleton"; import { Table, @@ -35,7 +34,6 @@ import { } from "@/components/ui/table"; import { Tooltip, - TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, @@ -47,6 +45,7 @@ import { UrlForm } from "@/components/forms/url-form"; import { CopyButton } from "@/components/shared/copy-button"; import { EmptyPlaceholder } from "@/components/shared/empty-placeholder"; import { LinkPreviewer } from "@/components/shared/link-previewer"; +import { PaginationWrapper } from "@/components/shared/pagination"; import UserUrlMetaInfo from "./meta"; diff --git a/components/shared/pagination.tsx b/components/shared/pagination.tsx new file mode 100644 index 0000000..fe5b281 --- /dev/null +++ b/components/shared/pagination.tsx @@ -0,0 +1,76 @@ +import React from "react"; + +import { + Pagination, + PaginationContent, + PaginationEllipsis, + PaginationItem, + PaginationLink, + PaginationNext, + PaginationPrevious, +} from "../ui/pagination"; + +export function PaginationWrapper({ + total, + currentPage, + setCurrentPage, +}: { + total: number; + currentPage: number; + setCurrentPage: (page: number) => void; +}) { + const shouldShowPage = (page: number) => { + return page === 1 || page === total || Math.abs(page - currentPage) <= 2; + }; + + const shouldShowEllipsis = (page: number, prevPage: number | null) => { + return prevPage && page - prevPage > 1; + }; + + const pages: any = []; + let prevPage: number | null = null; + + for (let page = 1; page <= total; page++) { + if (shouldShowPage(page)) { + if (shouldShowEllipsis(page, prevPage)) { + pages.push(); + } + pages.push( + + setCurrentPage(page)} + > + {page} + + , + ); + prevPage = page; + } + } + + return ( + + + + currentPage > 1 && setCurrentPage(currentPage - 1)} + href={`#`} // 可以使用链接或 onClick 方法 + /> + + + {pages} + + + + currentPage < total && setCurrentPage(currentPage + 1) + } + href={`#`} + /> + + + + ); +} diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx index e3884e3..c932016 100644 --- a/components/ui/pagination.tsx +++ b/components/ui/pagination.tsx @@ -1,42 +1,118 @@ -import { Pagination } from "@nextui-org/pagination"; -import { ArrowLeft, ArrowRight } from "lucide-react"; +import * as React from "react"; +import Link from "next/link"; +import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"; -import { Button } from "./button"; +import { cn } from "@/lib/utils"; +import { ButtonProps, buttonVariants } from "@/components/ui/button"; -export function PaginationWrapper({ - total, - currentPage, - setCurrentPage, -}: { - total: number; - currentPage: number; - setCurrentPage: any; -}) { - return ( -
- - - -
- ); -} +const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( +