1'use client'
2
3import {
4  Carousel,
5  CarouselApi,
6  CarouselContent,
7  CarouselItem,
8  CarouselNext,
9  CarouselPrevious
10} from '../../ui/carousel'
11import { useEffect, useState } from 'react'
12import { dataUseCases } from './data'
13import { UseCase } from '../../molecules/use-case/use-case'
14import { DotsPagination } from '../../molecules/dots-pagination/dots-pagination'
15
16export const UseCasesMobile = () => {
17  const [api, setApi] = useState<CarouselApi>()
18  const [current, setCurrent] = useState(0)
19
20  useEffect(() => {
21    if (!api) {
22      return
23    }
24
25    api.on('select', () => {
26      setCurrent(api.selectedScrollSnap())
27    })
28  }, [api])
29
30  return (
31    <div className='relative lg:hidden'>
32      <Carousel
33        opts={{
34          align: 'start',
35          loop: true
36        }}
37        setApi={setApi}
38        className='w-full'
39      >
40        <CarouselContent>
41          {dataUseCases.map((useCase, index) => (
42            <CarouselItem key={index}>
43              <UseCase useCaseData={useCase} />
44            </CarouselItem>
45          ))}
46        </CarouselContent>
47        <CarouselPrevious />
48        <CarouselNext />
49      </Carousel>
50
51      <DotsPagination
52        api={api}
53        current={current}
54        dotsLength={dataUseCases.length}
55        className='md:block'
56      />
57    </div>
58  )
59}
60

1'use client'
2
3import {
4  Carousel,
5  CarouselApi,
6  CarouselContent,
7  CarouselItem,
8  CarouselNext,
9  CarouselPrevious
10} from '../../ui/carousel'
11import { useEffect, useState } from 'react'
12import { dataUseCases } from './data'
13import { UseCase } from '../../molecules/use-case/use-case'
14import { DotsPagination } from '../../molecules/dots-pagination/dots-pagination'
15
16export const UseCasesMobile = () => {
17  const [api, setApi] = useState<CarouselApi>()
18  const [current, setCurrent] = useState(0)
19
20  useEffect(() => {
21    if (!api) {
22      return
23    }
24
25    api.on('select', () => {
26      setCurrent(api.selectedScrollSnap())
27    })
28  }, [api])
29
30  return (
31    <div className='relative lg:hidden'>
32      <Carousel
33        opts={{
34          align: 'start',
35          loop: true
36        }}
37        setApi={setApi}
38        className='w-full'
39      >
40        <CarouselContent>
41          {dataUseCases.map((useCase, index) => (
42            <CarouselItem key={index}>
43              <UseCase useCaseData={useCase} />
44            </CarouselItem>
45          ))}
46        </CarouselContent>
47        <CarouselPrevious />
48        <CarouselNext />
49      </Carousel>
50
51      <DotsPagination
52        api={api}
53        current={current}
54        dotsLength={dataUseCases.length}
55        className='md:block'
56      />
57    </div>
58  )
59}
60