← all fixtures

json-shadcn-ui-ui-react-code-in-string-constant

JSON View before/after files on GitHub Upstream commit shadcn-ui-ui.git@137b1c1 apps/v4/public/r/styles/radix-maia/pagination.json
Code view:

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before

1{
2 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 "name": "pagination",
4 "registryDependencies": [
5 "button"
6 ],
7 "files": [
8 {
9 "path": "registry/radix-maia/ui/pagination.tsx",
10 "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n data-slot=\"pagination\"\n className={cn(\n \"mx-auto flex w-full justify-center\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction PaginationContent({\n className,\n ...props\n}: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"pagination-content\"\n className={cn(\"gap-1 flex items-center\", className)}\n {...props}\n />\n )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n className,\n isActive,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) {\n return (\n <Button\n asChild\n variant={isActive ? \"outline\" : \"ghost\"}\n size={size}\n className={cn(className)}\n >\n <a\n aria-current={isActive ? \"page\" : undefined}\n data-slot=\"pagination-link\"\n data-active={isActive}\n {...props}\n />\n </Button>\n )\n}\n\nfunction PaginationPrevious({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n return (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"pl-2!\", className)}\n {...props}\n >\n <IconPlaceholder\n lucide=\"ChevronLeftIcon\"\n tabler=\"IconChevronLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n data-icon=\"inline-start\"\n />\n <span className=\"hidden sm:block\">\n Previous\n </span>\n </PaginationLink>\n )\n}\n\nfunction PaginationNext({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n return (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"pr-2!\", className)}\n {...props}\n >\n <span className=\"hidden sm:block\">Next</span>\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n data-icon=\"inline-end\"\n />\n </PaginationLink>\n )\n}\n\nfunction PaginationEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n <span\n aria-hidden\n data-slot=\"pagination-ellipsis\"\n className={cn(\n \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n className\n )}\n {...props}\n >\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n />\n <span className=\"sr-only\">More pages</span>\n </span>\n )\n}\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n}\n",
11 "type": "registry:ui"
12 }
13 ],
14 "type": "registry:ui"
15}

After

1{
2 "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 "name": "pagination",
4 "registryDependencies": [
5 "button"
6 ],
7 "files": [
8 {
9 "path": "registry/radix-maia/ui/pagination.tsx",
10 "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n data-slot=\"pagination\"\n className={cn(\n \"mx-auto flex w-full justify-center\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction PaginationContent({\n className,\n ...props\n}: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"pagination-content\"\n className={cn(\"gap-1 flex items-center\", className)}\n {...props}\n />\n )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n className,\n isActive,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) {\n return (\n <Button\n asChild\n variant={isActive ? \"outline\" : \"ghost\"}\n size={size}\n className={cn(className)}\n >\n <a\n aria-current={isActive ? \"page\" : undefined}\n data-slot=\"pagination-link\"\n data-active={isActive}\n {...props}\n />\n </Button>\n )\n}\n\nfunction PaginationPrevious({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n return (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"pl-2!\", className)}\n {...props}\n >\n <IconPlaceholder\n lucide=\"ChevronLeftIcon\"\n tabler=\"IconChevronLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"CaretLeftIcon\"\n data-icon=\"inline-start\"\n />\n <span className=\"hidden sm:block\">\n Previous\n </span>\n </PaginationLink>\n )\n}\n\nfunction PaginationNext({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n return (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"pr-2!\", className)}\n {...props}\n >\n <span className=\"hidden sm:block\">Next</span>\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n data-icon=\"inline-end\"\n />\n </PaginationLink>\n )\n}\n\nfunction PaginationEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n <span\n aria-hidden\n data-slot=\"pagination-ellipsis\"\n className={cn(\n \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n className\n )}\n {...props}\n >\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeIcon\"\n />\n <span className=\"sr-only\">More pages</span>\n </span>\n )\n}\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n}\n",
11 "type": "registry:ui"
12 }
13 ],
14 "type": "registry:ui"
15}

Before

document
object
{ "{"
pair
string
" "\""
string_content "$schema"
" "\""
: ":"
string
" "\""
string_content "https://ui.shadcn.com/schema/registry-item.json"
" "\""
, ","
pair
string
" "\""
string_content "name"
" "\""
: ":"
string
" "\""
string_content "pagination"
" "\""
, ","
pair
string
" "\""
string_content "registryDependencies"
" "\""
: ":"
array
[ "["
string
" "\""
string_content "button"
" "\""
] "]"
, ","
pair
string
" "\""
string_content "files"
" "\""
: ":"
array
[ "["
object
{ "{"
pair
string
" "\""
string_content "path"
" "\""
: ":"
string
" "\""
string_content "registry/radix-maia/ui/pagination.tsx"
" "\""
, ","
pair
string
" "\""
string_content "content"
" "\""
: ":"
string
" "\""
string_content "import * as React from "
escape_sequence "\\\""
string_content "react"
escape_sequence "\\\""
escape_sequence "\\n"
escape_sequence "\\n"
string_content "import { cn } from "
escape_sequence "\\\""
string_content "@/registry/bases/radix/lib/utils"
escape_sequence "\\\""
escape_sequence "\\n"
string_content "import { Button } from "
escape_sequence "\\\""
string_content "@/registry/bases/radix/ui/button"
escape_sequence "\\\""
escape_sequence "\\n"
string_content "import { IconPlaceholder } from "
escape_sequence "\\\""
string_content "@/app/(create)/components/icon-placeholder"
escape_sequence "\\\""
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function Pagination({ className, ...props }: React.Component"...
escape_sequence "\\\""
string_content "nav"
escape_sequence "\\\""
string_content ">) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <nav"
escape_sequence "\\n"
string_content " role="
escape_sequence "\\\""
string_content "navigation"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " aria-label="
escape_sequence "\\\""
string_content "pagination"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " data-slot="
escape_sequence "\\\""
string_content "pagination"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\n"
string_content " "
escape_sequence "\\\""
string_content "mx-auto flex w-full justify-center"
escape_sequence "\\\""
string_content ","
escape_sequence "\\n"
string_content " className"
escape_sequence "\\n"
string_content " )}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationContent({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: React.ComponentProps<"
escape_sequence "\\\""
string_content "ul"
escape_sequence "\\\""
string_content ">) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <ul"
escape_sequence "\\n"
string_content " data-slot="
escape_sequence "\\\""
string_content "pagination-content"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\\""
string_content "gap-1 flex items-center"
escape_sequence "\\\""
string_content ", className)}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationItem({ ...props }: React.ComponentProps<"
escape_sequence "\\\""
string_content "li"
escape_sequence "\\\""
string_content ">) {"
escape_sequence "\\n"
string_content " return <li data-slot="
escape_sequence "\\\""
string_content "pagination-item"
escape_sequence "\\\""
string_content " {...props} />"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "type PaginationLinkProps = {"
escape_sequence "\\n"
string_content " isActive?: boolean"
escape_sequence "\\n"
string_content "} & Pick<React.ComponentProps<typeof Button>, "
escape_sequence "\\\""
string_content "size"
escape_sequence "\\\""
string_content "> &"
escape_sequence "\\n"
string_content " React.ComponentProps<"
escape_sequence "\\\""
string_content "a"
escape_sequence "\\\""
string_content ">"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationLink({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " isActive,"
escape_sequence "\\n"
string_content " size = "
escape_sequence "\\\""
string_content "icon"
escape_sequence "\\\""
string_content ","
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: PaginationLinkProps) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <Button"
escape_sequence "\\n"
string_content " asChild"
escape_sequence "\\n"
string_content " variant={isActive ? "
escape_sequence "\\\""
string_content "outline"
escape_sequence "\\\""
string_content " : "
escape_sequence "\\\""
string_content "ghost"
escape_sequence "\\\""
string_content "}"
escape_sequence "\\n"
string_content " size={size}"
escape_sequence "\\n"
string_content " className={cn(className)}"
escape_sequence "\\n"
string_content " >"
escape_sequence "\\n"
string_content " <a"
escape_sequence "\\n"
string_content " aria-current={isActive ? "
escape_sequence "\\\""
string_content "page"
escape_sequence "\\\""
string_content " : undefined}"
escape_sequence "\\n"
string_content " data-slot="
escape_sequence "\\\""
string_content "pagination-link"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " data-active={isActive}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " </Button>"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationPrevious({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: React.ComponentProps<typeof PaginationLink>) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <PaginationLink"
escape_sequence "\\n"
string_content " aria-label="
escape_sequence "\\\""
string_content "Go to previous page"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " size="
escape_sequence "\\\""
string_content "default"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\\""
string_content "pl-2!"
escape_sequence "\\\""
string_content ", className)}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " >"
escape_sequence "\\n"
string_content " <IconPlaceholder"
escape_sequence "\\n"
string_content " lucide="
escape_sequence "\\\""
string_content "ChevronLeftIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " tabler="
escape_sequence "\\\""
string_content "IconChevronLeft"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " hugeicons="
escape_sequence "\\\""
string_content "ArrowLeft01Icon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " data-icon="
escape_sequence "\\\""
string_content "inline-start"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " <span className="
escape_sequence "\\\""
string_content "hidden sm:block"
escape_sequence "\\\""
string_content ">"
escape_sequence "\\n"
string_content " Previous"
escape_sequence "\\n"
string_content " </span>"
escape_sequence "\\n"
string_content " </PaginationLink>"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationNext({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: React.ComponentProps<typeof PaginationLink>) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <PaginationLink"
escape_sequence "\\n"
string_content " aria-label="
escape_sequence "\\\""
string_content "Go to next page"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " size="
escape_sequence "\\\""
string_content "default"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\\""
string_content "pr-2!"
escape_sequence "\\\""
string_content ", className)}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " >"
escape_sequence "\\n"
string_content " <span className="
escape_sequence "\\\""
string_content "hidden sm:block"
escape_sequence "\\\""
string_content ">Next</span>"
escape_sequence "\\n"
string_content " <IconPlaceholder"
escape_sequence "\\n"
string_content " lucide="
escape_sequence "\\\""
string_content "ChevronRightIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " tabler="
escape_sequence "\\\""
string_content "IconChevronRight"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " hugeicons="
escape_sequence "\\\""
string_content "ArrowRight01Icon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " data-icon="
escape_sequence "\\\""
string_content "inline-end"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " </PaginationLink>"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationEllipsis({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: React.ComponentProps<"
escape_sequence "\\\""
string_content "span"
escape_sequence "\\\""
string_content ">) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <span"
escape_sequence "\\n"
string_content " aria-hidden"
escape_sequence "\\n"
string_content " data-slot="
escape_sequence "\\\""
string_content "pagination-ellipsis"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\n"
string_content " "
escape_sequence "\\\""
string_content "size-9 items-center justify-center [&_svg:not([class*='size-"...
escape_sequence "\\\""
string_content ","
escape_sequence "\\n"
string_content " className"
escape_sequence "\\n"
string_content " )}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " >"
escape_sequence "\\n"
string_content " <IconPlaceholder"
escape_sequence "\\n"
string_content " lucide="
escape_sequence "\\\""
string_content "MoreHorizontalIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " tabler="
escape_sequence "\\\""
string_content "IconDots"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " hugeicons="
escape_sequence "\\\""
string_content "MoreHorizontalCircle01Icon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " <span className="
escape_sequence "\\\""
string_content "sr-only"
escape_sequence "\\\""
string_content ">More pages</span>"
escape_sequence "\\n"
string_content " </span>"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "export {"
escape_sequence "\\n"
string_content " Pagination,"
escape_sequence "\\n"
string_content " PaginationContent,"
escape_sequence "\\n"
string_content " PaginationEllipsis,"
escape_sequence "\\n"
string_content " PaginationItem,"
escape_sequence "\\n"
string_content " PaginationLink,"
escape_sequence "\\n"
string_content " PaginationNext,"
escape_sequence "\\n"
string_content " PaginationPrevious,"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
" "\""
, ","
pair
string
" "\""
string_content "type"
" "\""
: ":"
string
" "\""
string_content "registry:ui"
" "\""
} "}"
] "]"
, ","
pair
string
" "\""
string_content "type"
" "\""
: ":"
string
" "\""
string_content "registry:ui"
" "\""
} "}"

After

document
object
{ "{"
pair
string
" "\""
string_content "$schema"
" "\""
: ":"
string
" "\""
string_content "https://ui.shadcn.com/schema/registry-item.json"
" "\""
, ","
pair
string
" "\""
string_content "name"
" "\""
: ":"
string
" "\""
string_content "pagination"
" "\""
, ","
pair
string
" "\""
string_content "registryDependencies"
" "\""
: ":"
array
[ "["
string
" "\""
string_content "button"
" "\""
] "]"
, ","
pair
string
" "\""
string_content "files"
" "\""
: ":"
array
[ "["
object
{ "{"
pair
string
" "\""
string_content "path"
" "\""
: ":"
string
" "\""
string_content "registry/radix-maia/ui/pagination.tsx"
" "\""
, ","
pair
string
" "\""
string_content "content"
" "\""
: ":"
string
" "\""
string_content "import * as React from "
escape_sequence "\\\""
string_content "react"
escape_sequence "\\\""
escape_sequence "\\n"
escape_sequence "\\n"
string_content "import { cn } from "
escape_sequence "\\\""
string_content "@/registry/bases/radix/lib/utils"
escape_sequence "\\\""
escape_sequence "\\n"
string_content "import { Button } from "
escape_sequence "\\\""
string_content "@/registry/bases/radix/ui/button"
escape_sequence "\\\""
escape_sequence "\\n"
string_content "import { IconPlaceholder } from "
escape_sequence "\\\""
string_content "@/app/(create)/components/icon-placeholder"
escape_sequence "\\\""
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function Pagination({ className, ...props }: React.Component"...
escape_sequence "\\\""
string_content "nav"
escape_sequence "\\\""
string_content ">) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <nav"
escape_sequence "\\n"
string_content " role="
escape_sequence "\\\""
string_content "navigation"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " aria-label="
escape_sequence "\\\""
string_content "pagination"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " data-slot="
escape_sequence "\\\""
string_content "pagination"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\n"
string_content " "
escape_sequence "\\\""
string_content "mx-auto flex w-full justify-center"
escape_sequence "\\\""
string_content ","
escape_sequence "\\n"
string_content " className"
escape_sequence "\\n"
string_content " )}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationContent({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: React.ComponentProps<"
escape_sequence "\\\""
string_content "ul"
escape_sequence "\\\""
string_content ">) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <ul"
escape_sequence "\\n"
string_content " data-slot="
escape_sequence "\\\""
string_content "pagination-content"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\\""
string_content "gap-1 flex items-center"
escape_sequence "\\\""
string_content ", className)}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationItem({ ...props }: React.ComponentProps<"
escape_sequence "\\\""
string_content "li"
escape_sequence "\\\""
string_content ">) {"
escape_sequence "\\n"
string_content " return <li data-slot="
escape_sequence "\\\""
string_content "pagination-item"
escape_sequence "\\\""
string_content " {...props} />"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "type PaginationLinkProps = {"
escape_sequence "\\n"
string_content " isActive?: boolean"
escape_sequence "\\n"
string_content "} & Pick<React.ComponentProps<typeof Button>, "
escape_sequence "\\\""
string_content "size"
escape_sequence "\\\""
string_content "> &"
escape_sequence "\\n"
string_content " React.ComponentProps<"
escape_sequence "\\\""
string_content "a"
escape_sequence "\\\""
string_content ">"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationLink({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " isActive,"
escape_sequence "\\n"
string_content " size = "
escape_sequence "\\\""
string_content "icon"
escape_sequence "\\\""
string_content ","
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: PaginationLinkProps) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <Button"
escape_sequence "\\n"
string_content " asChild"
escape_sequence "\\n"
string_content " variant={isActive ? "
escape_sequence "\\\""
string_content "outline"
escape_sequence "\\\""
string_content " : "
escape_sequence "\\\""
string_content "ghost"
escape_sequence "\\\""
string_content "}"
escape_sequence "\\n"
string_content " size={size}"
escape_sequence "\\n"
string_content " className={cn(className)}"
escape_sequence "\\n"
string_content " >"
escape_sequence "\\n"
string_content " <a"
escape_sequence "\\n"
string_content " aria-current={isActive ? "
escape_sequence "\\\""
string_content "page"
escape_sequence "\\\""
string_content " : undefined}"
escape_sequence "\\n"
string_content " data-slot="
escape_sequence "\\\""
string_content "pagination-link"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " data-active={isActive}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " </Button>"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationPrevious({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: React.ComponentProps<typeof PaginationLink>) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <PaginationLink"
escape_sequence "\\n"
string_content " aria-label="
escape_sequence "\\\""
string_content "Go to previous page"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " size="
escape_sequence "\\\""
string_content "default"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\\""
string_content "pl-2!"
escape_sequence "\\\""
string_content ", className)}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " >"
escape_sequence "\\n"
string_content " <IconPlaceholder"
escape_sequence "\\n"
string_content " lucide="
escape_sequence "\\\""
string_content "ChevronLeftIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " tabler="
escape_sequence "\\\""
string_content "IconChevronLeft"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " hugeicons="
escape_sequence "\\\""
string_content "ArrowLeft01Icon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " phosphor="
escape_sequence "\\\""
string_content "CaretLeftIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " data-icon="
escape_sequence "\\\""
string_content "inline-start"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " <span className="
escape_sequence "\\\""
string_content "hidden sm:block"
escape_sequence "\\\""
string_content ">"
escape_sequence "\\n"
string_content " Previous"
escape_sequence "\\n"
string_content " </span>"
escape_sequence "\\n"
string_content " </PaginationLink>"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationNext({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: React.ComponentProps<typeof PaginationLink>) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <PaginationLink"
escape_sequence "\\n"
string_content " aria-label="
escape_sequence "\\\""
string_content "Go to next page"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " size="
escape_sequence "\\\""
string_content "default"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\\""
string_content "pr-2!"
escape_sequence "\\\""
string_content ", className)}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " >"
escape_sequence "\\n"
string_content " <span className="
escape_sequence "\\\""
string_content "hidden sm:block"
escape_sequence "\\\""
string_content ">Next</span>"
escape_sequence "\\n"
string_content " <IconPlaceholder"
escape_sequence "\\n"
string_content " lucide="
escape_sequence "\\\""
string_content "ChevronRightIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " tabler="
escape_sequence "\\\""
string_content "IconChevronRight"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " hugeicons="
escape_sequence "\\\""
string_content "ArrowRight01Icon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " phosphor="
escape_sequence "\\\""
string_content "CaretRightIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " data-icon="
escape_sequence "\\\""
string_content "inline-end"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " </PaginationLink>"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "function PaginationEllipsis({"
escape_sequence "\\n"
string_content " className,"
escape_sequence "\\n"
string_content " ...props"
escape_sequence "\\n"
string_content "}: React.ComponentProps<"
escape_sequence "\\\""
string_content "span"
escape_sequence "\\\""
string_content ">) {"
escape_sequence "\\n"
string_content " return ("
escape_sequence "\\n"
string_content " <span"
escape_sequence "\\n"
string_content " aria-hidden"
escape_sequence "\\n"
string_content " data-slot="
escape_sequence "\\\""
string_content "pagination-ellipsis"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " className={cn("
escape_sequence "\\n"
string_content " "
escape_sequence "\\\""
string_content "size-9 items-center justify-center [&_svg:not([class*='size-"...
escape_sequence "\\\""
string_content ","
escape_sequence "\\n"
string_content " className"
escape_sequence "\\n"
string_content " )}"
escape_sequence "\\n"
string_content " {...props}"
escape_sequence "\\n"
string_content " >"
escape_sequence "\\n"
string_content " <IconPlaceholder"
escape_sequence "\\n"
string_content " lucide="
escape_sequence "\\\""
string_content "MoreHorizontalIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " tabler="
escape_sequence "\\\""
string_content "IconDots"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " hugeicons="
escape_sequence "\\\""
string_content "MoreHorizontalCircle01Icon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " phosphor="
escape_sequence "\\\""
string_content "DotsThreeIcon"
escape_sequence "\\\""
escape_sequence "\\n"
string_content " />"
escape_sequence "\\n"
string_content " <span className="
escape_sequence "\\\""
string_content "sr-only"
escape_sequence "\\\""
string_content ">More pages</span>"
escape_sequence "\\n"
string_content " </span>"
escape_sequence "\\n"
string_content " )"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
escape_sequence "\\n"
string_content "export {"
escape_sequence "\\n"
string_content " Pagination,"
escape_sequence "\\n"
string_content " PaginationContent,"
escape_sequence "\\n"
string_content " PaginationEllipsis,"
escape_sequence "\\n"
string_content " PaginationItem,"
escape_sequence "\\n"
string_content " PaginationLink,"
escape_sequence "\\n"
string_content " PaginationNext,"
escape_sequence "\\n"
string_content " PaginationPrevious,"
escape_sequence "\\n"
string_content "}"
escape_sequence "\\n"
" "\""
, ","
pair
string
" "\""
string_content "type"
" "\""
: ":"
string
" "\""
string_content "registry:ui"
" "\""
} "}"
] "]"
, ","
pair
string
" "\""
string_content "type"
" "\""
: ":"
string
" "\""
string_content "registry:ui"
" "\""
} "}"