carousel-dots.tsx raw

   1  "use client";
   2  
   3  import * as React from "react";
   4  
   5  import { cn } from "src/lib/utils";
   6  
   7  // Dot Button Hook
   8  export type UseDotButtonType = {
   9    selectedIndex: number;
  10    scrollSnaps: number[];
  11    onDotButtonClick: (index: number) => void;
  12  };
  13  
  14  // Dot Button Component
  15  const CarouselDotButton = React.forwardRef<
  16    HTMLButtonElement,
  17    React.ComponentPropsWithRef<"button">
  18  >(({ className, ...props }, ref) => {
  19    return (
  20      <button
  21        ref={ref}
  22        type="button"
  23        className={cn(
  24          "h-2 w-2 rounded-full border-0 bg-muted transition-colors hover:bg-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  25          "data-[selected=true]:bg-primary",
  26          className
  27        )}
  28        {...props}
  29      />
  30    );
  31  });
  32  CarouselDotButton.displayName = "CarouselDotButton";
  33  
  34  // Dots Container Component
  35  const CarouselDots = React.forwardRef<
  36    HTMLDivElement,
  37    React.HTMLAttributes<HTMLDivElement>
  38  >(({ className, ...props }, ref) => (
  39    <div
  40      ref={ref}
  41      className={cn("flex items-center justify-center gap-2 p-2", className)}
  42      {...props}
  43    />
  44  ));
  45  CarouselDots.displayName = "CarouselDots";
  46  
  47  export { CarouselDotButton, CarouselDots };
  48