129 lines
3.4 KiB
TypeScript
129 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/base/components/example"
|
|
import { Field, FieldLabel } from "@/registry/bases/base/ui/field"
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationEllipsis,
|
|
PaginationItem,
|
|
PaginationLink,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from "@/registry/bases/base/ui/pagination"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/registry/bases/base/ui/select"
|
|
|
|
export default function PaginationExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<PaginationBasic />
|
|
<PaginationSimple />
|
|
<PaginationIconsOnly />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function PaginationBasic() {
|
|
return (
|
|
<Example title="Basic">
|
|
<Pagination>
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious href="#" />
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">1</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#" isActive>
|
|
2
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">3</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationEllipsis />
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationNext href="#" />
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function PaginationSimple() {
|
|
return (
|
|
<Example title="Simple">
|
|
<Pagination>
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">1</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#" isActive>
|
|
2
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">3</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">4</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">5</PaginationLink>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function PaginationIconsOnly() {
|
|
return (
|
|
<Example title="With Select">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<Field orientation="horizontal" className="w-fit">
|
|
<FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>
|
|
<Select defaultValue="25">
|
|
<SelectTrigger className="w-20" id="select-rows-per-page">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent align="start">
|
|
<SelectGroup>
|
|
<SelectItem value="10">10</SelectItem>
|
|
<SelectItem value="25">25</SelectItem>
|
|
<SelectItem value="50">50</SelectItem>
|
|
<SelectItem value="100">100</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Pagination className="mx-0 w-auto">
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious href="#" />
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationNext href="#" />
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|