Function CarouselIndicator

components/application/carousel/carousel.demo.tsx:7–33

({
    size = "md",
    isBrand,
    framed,
    className,
}: {
    size?: "md" | "lg";
    isBrand?: boolean;
    framed?: boolean;
    className?: string;
})

import { PaginationDot } from "@/components/application/pagination/pagination-dot";

export const CarouselIndicator = ({
    size = "md",
    isBrand,
    framed,
    className,
}: {
    size?: "md" | "lg";
    isBrand?: boolean;
    framed?: boolean;
    className?: string;
}) => {
    const { selectedIndex, scrollSnaps, api } = useCarousel();

    return (
        <PaginationDot
            size={size}
            framed={framed}
            isBrand={isBrand}
            page={selectedIndex + 1}
            total={scrollSnaps.length}
            className={className}
            onPageChange={(page) => {
                api?.scrollTo(page - 1);
            }}
        />
    );
};

export const CarouselMd = () => {
    return (