fix: add preview modal

.idea/workspace.xml

@@ -5,26 +5,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/src/widgets/preview-modal/index.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/preview-modal/styles.module.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/preview-modal/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$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/shared/ui/modal/modal-content.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/modal/modal-content.module.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/shared/ui/modal/modal.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/modal/modal.module.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/cookie/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/cookies/page.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/layout.tsx" 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/article/consultation-modal/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/consultation-modal/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/feature/article/consultation-modal/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/consultation-modal/styles.module.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/feature/article/consultation-modal/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/consultation-modal/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/feature/article/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/feature/article/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/feature/article/sidebar/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/feature/article/sidebar/ui.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/home/about/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/about/styles.module.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/home/about/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/about/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/home/call-us/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/call-us/styles.module.scss" 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" />
-      <change beforePath="$PROJECT_DIR$/src/widgets/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/widgets/mobile-callback/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/mobile-callback/ui.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -32,7 +17,7 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="DarkyenusTimeTracker">
-    <option name="totalTimeSeconds" value="203480" />
+    <option name="totalTimeSeconds" value="206831" />
     <option name="gitIntegration" value="true" />
     <option name="naggedAbout" value="1" />
   </component>
@@ -128,7 +113,7 @@
       <workItem from="1764591867512" duration="4332000" />
       <workItem from="1764657017067" duration="21490000" />
       <workItem from="1764741053553" duration="18011000" />
-      <workItem from="1764825390464" duration="14873000" />
+      <workItem from="1764825390464" duration="18661000" />
     </task>
     <servers />
   </component>

src/shared/ui/modal/modal-content.module.scss

@@ -1,5 +1,5 @@
 .ModalContent {
-  position: absolute;
+  position: fixed;
   width: rem(360px);
   padding: rem(40px) rem(20px) rem(20px);
   border-radius: rem(20px);

src/shared/ui/modal/modal.module.scss

@@ -1,6 +1,6 @@
 .ModalBackdrop {
   z-index: 1000;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   bottom: 0;

src/views/home/about/styles.module.scss

@@ -155,18 +155,19 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 }
 
 
-.ModalContainer {
+.VideoModalContainer {
   background: $color-white;
   width: 100%;
   border-radius: rem(16px);
   padding: rem(10px) rem(10px);
-  margin-bottom: 20px;
+  margin-bottom: rem(20px);
   display: flex;
   flex-direction: column;
-  max-width: 460px;
+  max-width: rem(460px);
   justify-content: center;
   align-self: center;
 
@@ -185,3 +186,49 @@
     }
   }
 }
+
+.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/views/home/about/ui.tsx

@@ -6,7 +6,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/grid';
 import 'swiper/css/autoplay';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay, Grid } from 'swiper/modules';
 import lic0 from '@public/images/licence/dtr-strahovka.png';
@@ -66,9 +66,9 @@ const swiperBreakpoints = {
 
 function About() {
   const modal = useModal();
-  const openModal = () =>
+  const openVideoModal = () =>
     modal.showModal(
-      <Preview className={s.ModalContainer}>
+      <Preview className={s.VideoModalContainer}>
         <iframe
           width='560'
           height='315'
@@ -82,6 +82,15 @@ function About() {
       </Preview>,
     );
 
+  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 (
     <section className={s.About}>
       <div className={s.Inner}>
@@ -103,7 +112,7 @@ function About() {
               </p>
             </div>
             <div className={s.Bottom}>
-              <Button className={s.Btn} onClick={openModal}>
+              <Button className={s.Btn} onClick={openVideoModal}>
                 <Icons.Youtube className={s.Icon} />
                 Посмотреть видео о нас
               </Button>
@@ -121,7 +130,13 @@ function About() {
           >
             {slidesData.map(({ id, name, image }) => (
               <SwiperSlide key={id} className={s.Slide}>
-                <Image src={image} alt={name} quality={75} width={200} />
+                <Image
+                  src={image}
+                  alt={name}
+                  quality={75}
+                  width={200}
+                  onClick={openPreviewModal({ image, name })}
+                />
               </SwiperSlide>
             ))}
           </Swiper>