feat: add slider

src/core/.gitkeep

@@ -1 +0,0 @@
-reusable components

src/views/home/ui/license/license.tsx

@@ -1,9 +1,11 @@
 import s from './license.module.scss';
 
 import { Button, Input, Mark } from '@shared/ui';
+import { LicenseSlider } from '@/widgets';
+import Image from 'next/image';
 
 import bgForm from '@public/images/bg-form.jpg';
-import Image from 'next/image';
+import emptyPaper from '@public/svg/empty-paper.svg';
 
 export default function License() {
   return (
@@ -12,7 +14,9 @@ export default function License() {
         Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
       </h2>
 
-      <div className={s.Slider}>Slider here</div>
+      <div className={s.Slider}>
+        <LicenseSlider images={slides} />
+      </div>
 
       <div className={s.Form}>
         <div className={s.Offer}>
@@ -45,3 +49,26 @@ export default function License() {
     </section>
   );
 }
+
+const slides = [
+  {
+    id: '0',
+    name: '',
+    image: emptyPaper,
+  },
+  {
+    id: '1',
+    name: '',
+    image: emptyPaper,
+  },
+  {
+    id: '2',
+    name: '',
+    image: emptyPaper,
+  },
+  {
+    id: '3',
+    name: '',
+    image: emptyPaper,
+  },
+];

src/widgets/.gitkeep

@@ -1 +0,0 @@
-reusable components

src/widgets/index.ts

@@ -0,0 +1 @@
+export { LicenseSlider } from './license-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>
+  );
+}