Pager

1 import { Pager, PagerLink } from "@/components/ui/pager";2 3 // The nav is a block element: give it the content column's width so the top4 // hairline reads as a structural rule and the lone link pins to its edge.5 export default function PagerSingle() {6   return (7     <div className="mx-auto flex w-full max-w-2xl flex-col gap-8">8       {/* Two pagers in one demo: each nav landmark needs its own name. */}9       <Pager aria-label="Next page navigation">10         <PagerLink direction="next" href="/ui/getting-started">11           Getting Started12         </PagerLink>13       </Pager>14       <Pager aria-label="Previous page navigation">15         <PagerLink direction="previous" href="/ui/getting-started/installation">16           Installation17         </PagerLink>18       </Pager>19     </div>20   );21 }22 

1 import { Pager, PagerLink } from "@/components/ui/pager";2 3 // Long neighbour titles are the common case in generated docs navigation. The4 // link becomes a flex row capped at half the width so the arrow stays pinned5 // while the label clips; the rule keeps its full-width structure.6 const CLIP_ROW = "flex max-w-[45%] items-center whitespace-nowrap";7 8 export default function PagerLongLabels() {9   return (10     <div className="mx-auto w-full max-w-md">11       <Pager>12         <PagerLink direction="previous" href="/ui/components/navigation-list" className={CLIP_ROW}>13           <span className="min-w-0 truncate" title="Navigation List — composable rows">14             Navigation List — composable rows15           </span>16         </PagerLink>17         <PagerLink direction="next" href="/ui/components/horizontal-stepper" className={CLIP_ROW}>18           <span className="min-w-0 truncate" title="Horizontal Stepper — compact variant">19             Horizontal Stepper — compact variant20           </span>21         </PagerLink>22       </Pager>23     </div>24   );25 }26 

1 import { Pager, PagerLink } from "@/components/ui/pager";2 3 // The interactive classes are applied statically so both treatments stay visible4 // in a screenshot. In real usage `hover:` / `focus-visible:` apply them for you.5 const HOVER = "text-foreground";6 const FOCUS_RING = "text-foreground outline-2 outline-ring outline-offset-0";7 8 const rows = [9   { label: "Resting", className: "", pagerLabel: "Resting page navigation" },10   { label: "Hover", className: HOVER, pagerLabel: "Hover page navigation" },11   { label: "Focus visible", className: FOCUS_RING, pagerLabel: "Focused page navigation" },12 ];13 14 export default function PagerStates() {15   return (16     <div className="mx-auto flex w-full max-w-2xl flex-col gap-6">17       {rows.map((row) => (18         <div key={row.label} className="flex flex-col gap-2">19           <span className="text-2xs uppercase tracking-wider text-muted-foreground">20             {row.label}21           </span>22           {/* Each nav landmark in one demo needs its own name. */}23           <Pager aria-label={row.pagerLabel}>24             <PagerLink direction="previous" href="/ui/components/badge" className={row.className}>25               Badge26             </PagerLink>27             <PagerLink direction="next" href="/ui/components/button" className={row.className}>28               Button29             </PagerLink>30           </Pager>31         </div>32       ))}33       <p className="text-xs text-muted-foreground">34         Hover lifts the label from --muted-foreground to --foreground. Keyboard focus keeps that35         lift and draws the outside focus ring (2px, --ring, offset 2px) around the link box.36       </p>37     </div>38   );39 }40 

1 "use client";2 3 import { Pager, PagerLink } from "@/components/ui/pager";4 5 // Simulated framework link component (replace with TanStack Link, Next.js Link, etc.).6 function AppLink(7   props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { ref?: React.Ref<HTMLAnchorElement> },8 ) {9   return <a {...props} />;10 }11 12 // The render prop hands the framework Link the merged className, the rel13 // attribute, and the direction; arrows are the consumer's to render.14 export default function PagerRenderProp() {15   return (16     <div className="mx-auto w-full max-w-2xl">17       <Pager>18         <PagerLink direction="previous">19           {({ className, rel, ref }) => (20             <AppLink ref={ref} href="/ui/components/toc" className={className} rel={rel}>21               <span aria-hidden="true">&larr; </span>22               TOC23             </AppLink>24           )}25         </PagerLink>26         <PagerLink direction="next">27           {({ className, rel, ref }) => (28             <AppLink ref={ref} href="/ui/components/panel" className={className} rel={rel}>29               Panel30               <span aria-hidden="true"> &rarr;</span>31             </AppLink>32           )}33         </PagerLink>34       </Pager>35     </div>36   );37 }38