feat: paginate ticket timeline

src/components/ui/pagination.tsx

@@ -0,0 +1,105 @@
+import Link from "next/link"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type PaginationProps = React.ComponentProps<"nav">
+
+export function Pagination({ className, ...props }: PaginationProps) {
+  return <nav role="navigation" aria-label="Paginação" className={cn("mx-auto flex justify-center", className)} {...props} />
+}
+
+export function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+  return <ul className={cn("flex items-center gap-1", className)} {...props} />
+}
+
+export function PaginationItem({ className, ...props }: React.ComponentProps<"li">) {
+  return <li className={cn("list-none", className)} {...props} />
+}
+
+type PaginationLinkBaseProps = {
+  isActive?: boolean
+  href?: string
+  disabled?: boolean
+} & React.ComponentProps<typeof Link>
+
+export function PaginationLink({
+  className,
+  isActive,
+  disabled,
+  href = "#",
+  ...props
+}: PaginationLinkBaseProps) {
+  const Component = disabled ? "span" : Link
+
+  return (
+    <Component
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        "inline-flex min-w-[36px] items-center justify-center rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50",
+        isActive && "border-slate-900 bg-slate-900 text-white hover:border-slate-900 hover:bg-slate-900",
+        disabled && "cursor-not-allowed text-neutral-400 hover:border-slate-200 hover:bg-white",
+        className
+      )}
+      href={href}
+      {...(Component === Link ? props : undefined)}
+    >
+      {props.children}
+    </Component>
+  )
+}
+
+type PaginationControlProps = {
+  "aria-label": string
+  disabled?: boolean
+  onClick?: () => void
+}
+
+function ControlButton({ children, disabled, onClick, ...props }: PaginationControlProps & React.ComponentProps<"button">) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        "inline-flex size-9 items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:cursor-not-allowed disabled:text-neutral-400"
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function PaginationPrevious({
+  disabled,
+  onClick,
+  ...props
+}: { disabled?: boolean; onClick?: () => void } & React.ComponentProps<"button">) {
+  return (
+    <ControlButton aria-label="Anterior" disabled={disabled} onClick={onClick} {...props}>
+      <ChevronLeft className="size-4" />
+    </ControlButton>
+  )
+}
+
+export function PaginationNext({
+  disabled,
+  onClick,
+  ...props
+}: { disabled?: boolean; onClick?: () => void } & React.ComponentProps<"button">) {
+  return (
+    <ControlButton aria-label="Próxima" disabled={disabled} onClick={onClick} {...props}>
+      <ChevronRight className="size-4" />
+    </ControlButton>
+  )
+}
+
+export function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span className={cn("inline-flex size-9 items-center justify-center text-neutral-500", className)} {...props}>
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">Mais páginas</span>
+    </span>
+  )
+}