1'use client';
2
3import clsx from 'clsx';
4import { classNames } from '../../../lib/utils';
5import { CarouselApi } from '../../ui/carousel';
6
7type DotsPaginationProps = {
8  api?: CarouselApi;
9  current: number;
10  handleCurrentIndexChange?: (index: number) => void;
11  className?: string;
12  dotsLength: number;
13};
14
15export const DotsPagination = ({
16  api,
17  current,
18  className,
19  dotsLength,
20  handleCurrentIndexChange,
21}: DotsPaginationProps) => {
22  return (
23    <div
24      className={classNames(
25        'absolute -bottom-16 left-1/2 -translate-x-1/2 -translate-y-1/2 transform md:-bottom-20 md:hidden',
26        className
27      )}
28    >
29      <div className='flex gap-1'>
30        {Array.from({ length: dotsLength }).map((_, index) => (
31          <button
32            type='button'
33            onClick={() => {
34              if (handleCurrentIndexChange) {
35                handleCurrentIndexChange(index);
36              } else {
37                api?.scrollTo(index);
38              }
39            }}
40            className='p-2 md:p-3'
41            key={index}
42            aria-label={`Go to slide ${index + 1}`}
43          >
44            <span
45              className={clsx(
46                'block h-2 w-2 rounded-full md:h-3 md:w-3',
47                current === index ? 'bg-alpha-900' : 'bg-alpha-300'
48              )}
49            />
50          </button>
51        ))}
52      </div>
53    </div>
54  );
55};
56

1'use client';
2
3import clsx from 'clsx';
4import { classNames } from '../../../lib/utils';
5import { CarouselApi } from '../../ui/carousel';
6
7type DotsPaginationProps = {
8  api?: CarouselApi;
9  current: number;
10  handleCurrentIndexChange?: (index: number) => void;
11  className?: string;
12  dotsLength: number;
13};
14
15export const DotsPagination = ({
16  api,
17  current,
18  className,
19  dotsLength,
20  handleCurrentIndexChange,
21}: DotsPaginationProps) => {
22  return (
23    <div
24      className={classNames(
25        'absolute -bottom-16 left-1/2 -translate-x-1/2 -translate-y-1/2 transform md:-bottom-20 md:hidden',
26        className
27      )}
28    >
29      <div className='flex gap-1'>
30        {Array.from({ length: dotsLength }).map((_, index) => (
31          <button
32            type='button'
33            onClick={() => {
34              if (handleCurrentIndexChange) {
35                handleCurrentIndexChange(index);
36              } else {
37                api?.scrollTo(index);
38              }
39            }}
40            className='p-2 md:p-3'
41            key={index}
42            aria-label={`Go to slide ${index + 1}`}
43          >
44            <span
45              className={clsx(
46                'block h-2 w-2 rounded-full md:h-3 md:w-3',
47                current === index ? 'bg-alpha-900' : 'bg-alpha-300'
48              )}
49            />
50          </button>
51        ))}
52      </div>
53    </div>
54  );
55};
56