1'use client'
2
3import { useEffect, useState } from 'react'
4
5import { Carousel, CarouselApi, CarouselContent, CarouselItem } from '../../ui/carousel'
6import { Article } from '../../molecules/article/article'
7import { DotsPagination } from '../../molecules/dots-pagination/dots-pagination'
8
9import { ProcessedFile } from './articles'
10
11export const ArticlesCarousel = ({ data }: { data: ProcessedFile[] }) => {
12  const [api, setApi] = useState<CarouselApi>()
13  const [current, setCurrent] = useState(0)
14
15  useEffect(() => {
16    if (!api) {
17      return
18    }
19
20    api.on('select', () => {
21      setCurrent(api.selectedScrollSnap())
22    })
23  }, [api])
24
25  return (
26    <>
27      <Carousel
28        opts={{
29          align: 'start',
30          loop: true
31        }}
32        setApi={setApi}
33        className='w-full'
34      >
35        <CarouselContent>
36          {data.map((article, index) => (
37            <CarouselItem key={index} className='md:basis-1/2 lg:basis-1/3'>
38              <Article article={article} />
39            </CarouselItem>
40          ))}
41        </CarouselContent>
42      </Carousel>
43
44      <DotsPagination api={api} current={current} dotsLength={data.length} />
45    </>
46  )
47}
48

1'use client'
2
3import { useEffect, useState } from 'react'
4
5import { Carousel, CarouselApi, CarouselContent, CarouselItem } from '../../ui/carousel'
6import { Article } from '../../molecules/article/article'
7import { DotsPagination } from '../../molecules/dots-pagination/dots-pagination'
8
9import { ProcessedFile } from './articles'
10
11export const ArticlesCarousel = ({ data }: { data: ProcessedFile[] }) => {
12  const [api, setApi] = useState<CarouselApi>()
13  const [current, setCurrent] = useState(0)
14
15  useEffect(() => {
16    if (!api) {
17      return
18    }
19
20    api.on('select', () => {
21      setCurrent(api.selectedScrollSnap())
22    })
23  }, [api])
24
25  return (
26    <>
27      <Carousel
28        opts={{
29          align: 'start',
30          loop: true
31        }}
32        setApi={setApi}
33        className='w-full'
34      >
35        <CarouselContent>
36          {data.map((article, index) => (
37            <CarouselItem key={index} className='md:basis-1/2 lg:basis-1/3'>
38              <Article article={article} />
39            </CarouselItem>
40          ))}
41        </CarouselContent>
42      </Carousel>
43
44      <DotsPagination api={api} current={current} dotsLength={data.length} />
45    </>
46  )
47}
48