صفحه‌بندی (Pagination)

1import {
2  Pagination,
3  PaginationContent,
4  PaginationEllipsis,
5  PaginationItem,
6  PaginationLink,
7  PaginationNext,
8  PaginationPrevious,
9} from "@/components/ui/pagination";
10
11export default function BasicExample() {
12  return (
13    <Pagination>
14      <PaginationContent>
15        <PaginationItem>
16          <PaginationPrevious href="#" />
17        </PaginationItem>
18        <PaginationItem>
19          <PaginationLink href="#">۱</PaginationLink>
20        </PaginationItem>
21        <PaginationItem>
22          <PaginationLink href="#" isActive>
23            ۲
24          </PaginationLink>
25        </PaginationItem>
26        <PaginationItem>
27          <PaginationLink href="#">۳</PaginationLink>
28        </PaginationItem>
29        <PaginationItem>
30          <PaginationEllipsis />
31        </PaginationItem>
32        <PaginationItem>
33          <PaginationNext href="#" />
34        </PaginationItem>
35      </PaginationContent>
36    </Pagination>
37  );
38}
39

1import {
2  Pagination,
3  PaginationContent,
4  PaginationItem,
5  PaginationLink,
6} from "@/components/ui/pagination";
7
8export default function SimpleExample() {
9  return (
10    <Pagination>
11      <PaginationContent>
12        <PaginationItem>
13          <PaginationLink href="#">۱</PaginationLink>
14        </PaginationItem>
15        <PaginationItem>
16          <PaginationLink href="#" isActive>
17            ۲
18          </PaginationLink>
19        </PaginationItem>
20        <PaginationItem>
21          <PaginationLink href="#">۳</PaginationLink>
22        </PaginationItem>
23        <PaginationItem>
24          <PaginationLink href="#">۴</PaginationLink>
25        </PaginationItem>
26        <PaginationItem>
27          <PaginationLink href="#">۵</PaginationLink>
28        </PaginationItem>
29      </PaginationContent>
30    </Pagination>
31  );
32}
33

1import { Field, FieldLabel } from "@/components/ui/field";
2import {
3  Pagination,
4  PaginationContent,
5  PaginationItem,
6  PaginationNext,
7  PaginationPrevious,
8} from "@/components/ui/pagination";
9import {
10  Select,
11  SelectContent,
12  SelectGroup,
13  SelectItem,
14  SelectTrigger,
15  SelectValue,
16} from "@/components/ui/select";
17
18export default function IconsOnlyExample() {
19  return (
20    <div className="flex items-center justify-between gap-4">
21      <Field orientation="horizontal" className="w-fit">
22        <FieldLabel htmlFor="select-rows-per-page">تعداد در هر صفحه</FieldLabel>
23        <Select defaultValue="25">
24          <SelectTrigger className="w-20" id="select-rows-per-page">
25            <SelectValue />
26          </SelectTrigger>
27          <SelectContent align="start">
28            <SelectGroup>
29              <SelectItem value="10">۱۰</SelectItem>
30              <SelectItem value="25">۲۵</SelectItem>
31              <SelectItem value="50">۵۰</SelectItem>
32              <SelectItem value="100">۱۰۰</SelectItem>
33            </SelectGroup>
34          </SelectContent>
35        </Select>
36      </Field>
37      <Pagination className="mx-0 w-auto">
38        <PaginationContent>
39          <PaginationItem>
40            <PaginationPrevious href="#" />
41          </PaginationItem>
42          <PaginationItem>
43            <PaginationNext href="#" />
44          </PaginationItem>
45        </PaginationContent>
46      </Pagination>
47    </div>
48  );
49}
50