Derived Components

import { Button } from "@/app/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";

/**
 * Mirrors PaginationLink / PaginationPrevious / PaginationNext — all
 * built on the base Button's `buttonVariants`, not a separate style.
 * Active page = "outline",
 * others = "ghost", both size="icon"; prev/next add a gap + label.
 */
export function PaginationDemo() {
  return (
    <nav className="flex items-center gap-1">
      <Button variant="ghost" size="default" className="gap-1 pl-2.5">
        <ChevronLeft size={16} />
        Previous
      </Button>
      <Button variant="ghost" size="icon" aria-label="Page 1">
        1
      </Button>
      <Button variant="outline" size="icon" aria-label="Page 2 (current)">
        2
      </Button>
      <Button variant="ghost" size="icon" aria-label="Page 3">
        3
      </Button>
      <Button variant="ghost" size="default" className="gap-1 pr-2.5">
        Next
        <ChevronRight size={16} />
      </Button>
    </nav>
  );
}

import { Button } from "@/app/components/ui/button";
import { ArrowLeft, ArrowRight } from "lucide-react";

/**
 * Mirrors CarouselPrevious / CarouselNext — base Button,
 * variant="outline" size="icon", normally absolutely
 * positioned at the edges of a carousel. Shown inline here (not
 * absolutely positioned) so it renders in a static preview.
 */
export function CarouselNavDemo() {
  return (
    <div className="flex items-center gap-3">
      <Button
        variant="outline"
        size="icon"
        aria-label="Previous slide"
        className="h-8 w-8 rounded-full"
      >
        <ArrowLeft size={16} />
      </Button>
      <Button
        variant="outline"
        size="icon"
        aria-label="Next slide"
        className="h-8 w-8 rounded-full"
      >
        <ArrowRight size={16} />
      </Button>
    </div>
  );
}