Function CarouselButton

src/components/ui/carousel.tsx:195–226

({
  segment,
  className,
  intent = 'outline',
  isCircle = true,
  size = 'sq-sm',
  ref,
  ...props
}: ButtonProps & { segment: 'previous' | 'next' })

}

const CarouselButton = ({
  segment,
  className,
  intent = 'outline',
  isCircle = true,
  size = 'sq-sm',
  ref,
  ...props
}: ButtonProps & { segment: 'previous' | 'next' }) => {
  const { orientation, scrollPrev, canScrollPrev, scrollNext, canScrollNext } = useCarousel()
  const isNext = segment === 'next'
  const canScroll = isNext ? canScrollNext : canScrollPrev
  const scroll = isNext ? scrollNext : scrollPrev
  const Icon = isNext ? ChevronRightIcon : ChevronLeftIcon

  return (
    <Button
      aria-label={isNext ? 'Next slide' : 'Previous slide'}
      data-handler={segment}
      intent={intent}
      ref={ref}
      size={size}
      isCircle={isCircle}
      className={cx([orientation === 'vertical' ? 'rotate-90' : '', 'shrink-0'], className)}
      isDisabled={!canScroll}
      onPress={scroll}
      {...props}
    >
      <Icon className="size-4" />
    </Button>
  )
}

export type { CarouselApi }
export { Carousel, CarouselButton, CarouselContent, CarouselHandler, CarouselItem }