Function CarouselNext

astro-example/src/components/ui/carousel.tsx:230–272

(
	props: VoidProps<ComponentProps<typeof Button>>,
)

};

export const CarouselNext = (
	props: VoidProps<ComponentProps<typeof Button>>,
) => {
	const merge = mergeProps<VoidProps<ComponentProps<typeof Button>[]>>(
		{ variant: "outline", size: "icon" },
		props,
	);
	const [local, rest] = splitProps(merge, ["class", "variant", "size"]);
	const { orientation, scrollNext, canScrollNext } = useCarousel();

	return (
		<Button
			variant={local.variant}
			size={local.size}
			class={cn(
				"absolute h-8 w-8 touch-manipulation rounded-full",
				orientation === "horizontal"
					? "-right-12 top-1/2 -translate-y-1/2"
					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
				local.class,
			)}
			disabled={!canScrollNext()}
			onClick={scrollNext}
			{...rest}
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				class="size-4"
			>
				<path
					fill="none"
					stroke="currentColor"
					strokeLinecap="round"
					strokeLinejoin="round"
					strokeWidth="2"
					d="M5 12h14m-4 4l4-4m-4-4l4 4"
				/>
				<title>Next slide</title>
			</svg>
		</Button>
	);
};