feat: add slider

src/widgets/license-slider/index.ts

@@ -0,0 +1 @@
+export { default as LicenseSlider } from './license-slider';

src/widgets/license-slider/license-slider.module.scss

@@ -0,0 +1,9 @@
+.Slider {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.Slide {
+  cursor: pointer;
+}

src/widgets/license-slider/license-slider.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import s from './license-slider.module.scss';
+
+import Image from 'next/image';
+import { StaticImport } from 'next/dist/shared/lib/get-img-props';
+import { clsx } from 'clsx';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+type LicenseSliderProps = {
+  className?: string;
+  images: {
+    id: string;
+    name: string;
+    image: string | StaticImport;
+  }[];
+};
+
+const mockFullSizeImage = 'images/empty-image.jpg';
+
+export default function LicenseSlider({
+  className,
+  images,
+}: LicenseSliderProps) {
+  return (
+    <Swiper
+      className={clsx(s.Slider, className)}
+      slidesPerView={3}
+      onSlideChange={() => console.log('slide change')}
+      onSwiper={(swiper) => console.log(swiper)}
+    >
+      {images.map(({ id, name, image }) => (
+        <SwiperSlide key={id}>
+          <a href={mockFullSizeImage} target='_blank'>
+            <Image className={s.Slide} src={image} alt={name} />
+          </a>
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  );
+}