Skip to content

Commit

Permalink
Merge pull request #110 from codelitdev/issue-98
Browse files Browse the repository at this point in the history 
Replaced pagination with shadcn's pagination
  • Loading branch information
@rajat1saxena
rajat1saxena authored Feb 28, 2024
2 parents 0e1073e + 113d80c commit 4a3689a
Show file tree
Hide file tree
Showing 2 changed files with 197 additions and 35 deletions.
115 changes: 80 additions & 35 deletions apps/web/app/app/[keyid]/files/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
import Link from "next/link";
import { redirect } from "next/navigation";
import { auth } from "@/auth";
import { getMediaFiles, getCount } from "./actions";
import { Media } from "@medialit/models";
import { Button } from "@/components/ui/button";
import FilePreview from "./file-preview";
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import {
DoubleArrowLeftIcon,
DoubleArrowRightIcon,
} from "@radix-ui/react-icons";

export default async function Media({
params,
Expand Down Expand Up @@ -49,42 +60,76 @@ export default async function Media({
))}
</div>
</div>

<div className="flex items-center justify-center gap-2">
<Link href={`/app/${keyid}/files?page=${Number(page) - 1}`}>
<Button
disabled={page ? parseInt(page) <= 1 : true}
className={
page
? parseInt(page) <= 1
? "!bg-muted-foreground"
: ""
: ""
}
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationLink
href={`/app/${keyid}/files?page=${1}`}
className={`
${
parseInt(page) === 1
? "pointer-events-none text-slate-400"
: ""
}
`}
>
<DoubleArrowLeftIcon className="h-4 w-4" />
</PaginationLink>
</PaginationItem>
<PaginationItem
className={`
${
parseInt(page) === 1
? "pointer-events-none text-slate-400"
: ""
}
`}
>
<PaginationPrevious
href={
parseInt(page) === 1
? `/app/${keyid}/files?page=${Number(page)}`
: `/app/${keyid}/files?page=${
Number(page) - 1
}`
}
/>
</PaginationItem>
<PaginationItem className="text-sm">
<span className="font-bold">{page}</span> of{" "}
{totalPages} ({medias.length} Files)
</PaginationItem>
<PaginationItem
className={`
${
parseInt(page) === totalPages
? "pointer-events-none text-slate-400"
: ""
}
`}
>
Previous
</Button>
</Link>
<p>
<span className="font-bold">{page}</span> of {totalPages} (
{medias.length} Files)
</p>
<Link href={`/app/${keyid}/files?page=${Number(page) + 1}`}>
<Button
disabled={page ? parseInt(page) >= totalPages : true}
className={
page
? parseInt(page) >= totalPages
? "!bg-muted-foreground"
: ""
<PaginationNext
href={`/app/${keyid}/files?page=${
Number(page) + 1
}`}
/>
</PaginationItem>
<PaginationItem>
<PaginationLink
href={`/app/${keyid}/files?page=${totalPages}`}
className={`
${
parseInt(page) === totalPages
? "pointer-events-none text-slate-400"
: ""
}
>
{" "}
Next{" "}
</Button>
</Link>
</div>
`}
>
<DoubleArrowRightIcon className="h-4 w-4" />
</PaginationLink>
</PaginationItem>
</PaginationContent>
</Pagination>
</>
);
}
117 changes: 117 additions & 0 deletions apps/web/components/ui/pagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import * as React from "react";
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";

import { cn } from "@/lib/utils";
import { ButtonProps, buttonVariants } from "@/components/ui/button";

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
<nav
role="navigation"
aria-label="pagination"
className={cn("mx-auto flex w-full justify-center", className)}
{...props}
/>
);
Pagination.displayName = "Pagination";

const PaginationContent = React.forwardRef<
HTMLUListElement,
React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
<ul
ref={ref}
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
));
PaginationContent.displayName = "PaginationContent";

const PaginationItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
<li ref={ref} className={cn("", className)} {...props} />
));
PaginationItem.displayName = "PaginationItem";

type PaginationLinkProps = {
isActive?: boolean;
} & Pick<ButtonProps, "size"> &
React.ComponentProps<"a">;

const PaginationLink = ({
className,
isActive,
size = "icon",
...props
}: PaginationLinkProps) => (
<a
aria-current={isActive ? "page" : undefined}
className={cn(
buttonVariants({
variant: isActive ? "outline" : "ghost",
size,
}),
className
)}
{...props}
/>
);
PaginationLink.displayName = "PaginationLink";

const PaginationPrevious = ({
className,
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to previous page"
size="default"
className={cn("gap-1 pl-2.5", className)}
{...props}
>
<ChevronLeft className="h-4 w-4" />
<span>Previous</span>
</PaginationLink>
);
PaginationPrevious.displayName = "PaginationPrevious";

const PaginationNext = ({
className,
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to next page"
size="default"
className={cn("gap-1 pr-2.5", className)}
{...props}
>
<span>Next</span>
<ChevronRight className="h-4 w-4" />
</PaginationLink>
);
PaginationNext.displayName = "PaginationNext";

const PaginationEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
<span
aria-hidden
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";

export {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
};

0 comments on commit 4a3689a

Please sign in to comment.