fix: add preview in contacts page

.idea/workspace.xml

@@ -5,29 +5,9 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/src/views/experts/borodin/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/experts/gulmamedov/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/experts/kaminskiy/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/experts/kolodiy/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/experts/mikova/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/experts/mityaev/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/experts/polinov/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/experts/yancen/model/slider.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/index.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/styles.module.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/expert-slider/ui.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/entities/beauty-button/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/entities/beauty-button/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/feature/contacts/licence-slider/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/feature/contacts/licence-slider/styles.module.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/experts/borodin/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/borodin/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/feature/contacts/licence-slider/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/feature/contacts/licence-slider/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/experts/gulmamedov/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/gulmamedov/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/experts/mikova/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/mikova/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/experts/mityaev/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/mityaev/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/experts/polinov/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/polinov/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/volkova-goncharova/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/experts/yancen/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/yancen/styles.module.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/experts/yancen/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/experts/yancen/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/home/call-us/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/call-us/ui.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -35,7 +15,7 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="DarkyenusTimeTracker">
-    <option name="totalTimeSeconds" value="257682" />
+    <option name="totalTimeSeconds" value="258039" />
     <option name="gitIntegration" value="true" />
     <option name="naggedAbout" value="1" />
   </component>
@@ -154,7 +134,7 @@
       <workItem from="1765705636949" duration="904000" />
       <workItem from="1765708416527" duration="881000" />
       <workItem from="1765709337833" duration="2887000" />
-      <workItem from="1765782728360" duration="10274000" />
+      <workItem from="1765782728360" duration="10627000" />
     </task>
     <servers />
   </component>

src/feature/contacts/licence-slider/styles.module.scss

@@ -6,6 +6,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
 
     .Image {
       width: rem(200px);
@@ -13,3 +14,50 @@
     }
   }
 }
+
+
+.PreviewModalContainer {
+  background: $color-white;
+  width: max-content;
+  height: auto;
+  border-radius: rem(16px);
+  padding: rem(10px) rem(10px);
+  margin-bottom: rem(20px);
+  display: flex;
+  flex-direction: column;
+  //max-width: max-content;//rem(460px);
+  justify-content: center;
+  align-self: center;
+  overflow: visible;
+
+  @include iftablet{
+    max-width: unset;
+    align-self: unset;
+    width: max-content;
+    height: auto;
+  }
+
+  .Image{
+    object-fit: contain;
+    width: 80vw;
+    height: auto;
+    max-height: 90vh;
+    @include iftablet{
+      width: auto;
+      height: 90vh;
+    }
+  }
+
+  & > svg {
+    z-index: 1;
+    top: rem(5px);
+    right: rem(-25px);
+    @include iftablet{
+      right: rem(-40px);
+    }
+    path {
+      stroke: #FFFFFF;
+      stroke-opacity: 1;
+    }
+  }
+}

src/feature/contacts/licence-slider/ui.tsx

@@ -9,6 +9,8 @@ import s from './styles.module.scss';
 import Image, { StaticImageData } from 'next/image';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay, Grid } from 'swiper/modules';
+import { useModal } from '@core/providers/modal-provider';
+import { Preview } from '@/widgets';
 
 type LicenseSliderProps = {
   slidesData: {
@@ -38,6 +40,17 @@ const swiperBreakpoints = {
 };
 
 function LicenceSlider({ slidesData }: LicenseSliderProps) {
+  const modal = useModal();
+
+  const openPreviewModal =
+    ({ image, name }: { image: StaticImageData; name: string }) =>
+    () =>
+      modal.showModal(
+        <Preview className={s.PreviewModalContainer}>
+          <Image className={s.Image} src={image} alt={name} quality={75} />
+        </Preview>,
+      );
+
   return (
     <Swiper
       className={s.Slider}
@@ -51,7 +64,13 @@ function LicenceSlider({ slidesData }: LicenseSliderProps) {
     >
       {slidesData.map(({ id, name, image }) => (
         <SwiperSlide key={id} className={s.Slide}>
-          <Image className={s.Image} src={image} alt={name} quality={75} />
+          <Image
+            className={s.Image}
+            src={image}
+            alt={name}
+            quality={75}
+            onClick={openPreviewModal({ image, name })}
+          />
         </SwiperSlide>
       ))}
     </Swiper>