group-banner-images index.tsx

0% Statements 0/36

0% Branches 0/1

0% Functions 0/1

0% Lines 0/36

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client';

import 'swiper/css';
import 'swiper/css/pagination';

import './index.css';

import { Pagination } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

import { GroupImage } from '@/components/shared';
import { GetGroupDetailsResponse } from '@/types/service/group';

interface Props {
  images: GetGroupDetailsResponse['images'];
}

export const GroupBannerImages = ({ images }: Props) => {
  const hasImages = Boolean(images.length);

  return (
    <section className='select-none'>
      {hasImages ? (
        <Swiper loop={images.length > 1} modules={[Pagination]} pagination>
          {images.map(({ groupImageId, variants }) => (
            <SwiperSlide key={groupImageId} className='relative'>
              <GroupImage size='xl' src={variants[0].imageUrl} />
            </SwiperSlide>
          ))}
        </Swiper>
      ) : (
        <GroupImage size='xl' src={null} />
      )}
    </section>
  );
};