From 1a49b3f8e2ff49b83c60e8719c8ea3dc54b91f29 Mon Sep 17 00:00:00 2001
From: RedrockJS <smb.sochi@gmail.com>
Date: Thu, 4 Dec 2025 12:40:53 +0300
Subject: [PATCH] fix: add preview modal

---
 .idea/workspace.xml                           | 31 ++++----
 package-lock.json                             |  8 +--
 package.json                                  |  2 +-
 src/app/{cookie => cookies}/page.tsx          |  0
 src/app/layout.tsx                            |  2 +
 src/entities/beauty-button/ui.tsx             |  4 +-
 src/feature/article/index.ts                  |  1 -
 src/feature/article/sidebar/ui.tsx            |  2 +-
 src/views/home/about/styles.module.scss       | 71 ++++++++++++++-----
 src/views/home/about/ui.tsx                   | 26 ++++++-
 src/views/home/call-us/styles.module.scss     | 16 +++++
 src/views/home/call-us/ui.tsx                 | 24 ++++++-
 .../consultation-modal/index.ts               |  0
 .../consultation-modal/styles.module.scss     |  0
 .../consultation-modal/ui.tsx                 |  0
 src/widgets/index.ts                          |  2 +
 src/widgets/mobile-callback/ui.tsx            |  2 +-
 src/widgets/preview-modal/index.ts            |  1 +
 src/widgets/preview-modal/styles.module.scss  | 27 +++++++
 src/widgets/preview-modal/ui.tsx              | 17 +++++
 20 files changed, 193 insertions(+), 43 deletions(-)
 rename src/app/{cookie => cookies}/page.tsx (100%)
 rename src/{feature/article => widgets}/consultation-modal/index.ts (100%)
 rename src/{feature/article => widgets}/consultation-modal/styles.module.scss (100%)
 rename src/{feature/article => widgets}/consultation-modal/ui.tsx (100%)
 create mode 100644 src/widgets/preview-modal/index.ts
 create mode 100644 src/widgets/preview-modal/styles.module.scss
 create mode 100644 src/widgets/preview-modal/ui.tsx

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 73d1d5f..4b4ab6a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,20 +5,26 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/src/app/cookie/page.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/cookie/index.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/cookie/styles.module.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/cookie/ui.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/cookie-notice/index.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/cookie-notice/styles.module.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/cookie-notice/ui.tsx" afterDir="false" />
+      <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$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" 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/views/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/index.ts" 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" />
-      <change beforePath="$PROJECT_DIR$/src/widgets/scroll-to-top/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/scroll-to-top/styles.module.scss" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -26,7 +32,7 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="DarkyenusTimeTracker">
-    <option name="totalTimeSeconds" value="199383" />
+    <option name="totalTimeSeconds" value="203480" />
     <option name="gitIntegration" value="true" />
     <option name="naggedAbout" value="1" />
   </component>
@@ -43,7 +49,7 @@
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
   <component name="ProblemsViewState">
-    <option name="selectedTabId" value="CurrentFile" />
+    <option name="selectedTabId" value="DEPENDENCY_CHECKER_PROBLEMS_TAB" />
   </component>
   <component name="ProjectColorInfo">{
   &quot;customColor&quot;: &quot;&quot;,
@@ -82,6 +88,7 @@
 }</component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\dev-personal\ocenka-web\src\widgets" />
       <recent name="C:\dev-personal\ocenka-web\src\widgets\sidebar" />
       <recent name="C:\dev-personal\ocenka-web\src\views\home" />
     </key>
@@ -121,7 +128,7 @@
       <workItem from="1764591867512" duration="4332000" />
       <workItem from="1764657017067" duration="21490000" />
       <workItem from="1764741053553" duration="18011000" />
-      <workItem from="1764825390464" duration="8920000" />
+      <workItem from="1764825390464" duration="14873000" />
     </task>
     <servers />
   </component>
diff --git a/package-lock.json b/package-lock.json
index 0292fba..6761168 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@maskito/react": "^3.9.1",
         "libphonenumber-js": "^1.12.9",
         "next": "15.5.2",
-        "nodemailer": "7.0.7",
+        "nodemailer": "7.0.11",
         "react": "19.1.1",
         "react-dom": "19.1.1",
         "react-hook-form": "^7.60.0",
@@ -4535,9 +4535,9 @@
       }
     },
     "node_modules/nodemailer": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.7.tgz",
-      "integrity": "sha512-jGOaRznodf62TVzdyhKt/f1Q/c3kYynk8629sgJHpRzGZj01ezbgMMWJSAjHADcwTKxco3B68/R+KHJY2T5BaA==",
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.11.tgz",
+      "integrity": "sha512-gnXhNRE0FNhD7wPSCGhdNh46Hs6nm+uTyg+Kq0cZukNQiYdnCsoQjodNP9BQVG9XrcK/v6/MgpAPBUFyzh9pvw==",
       "license": "MIT-0",
       "engines": {
         "node": ">=6.0.0"
diff --git a/package.json b/package.json
index 48db0d7..08c797a 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@maskito/react": "^3.9.1",
     "libphonenumber-js": "^1.12.9",
     "next": "15.5.2",
-    "nodemailer": "7.0.7",
+    "nodemailer": "7.0.11",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-hook-form": "^7.60.0",
diff --git a/src/app/cookie/page.tsx b/src/app/cookies/page.tsx
similarity index 100%
rename from src/app/cookie/page.tsx
rename to src/app/cookies/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0dd706a..930c1fa 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,6 +11,7 @@ import {
   ScrollToTop,
 } from '@/widgets';
 import { ModalProvider } from '@core/providers/modal-provider';
+import { Toaster } from 'react-hot-toast';
 
 const roboto = Roboto({
   subsets: ['cyrillic'],
@@ -43,6 +44,7 @@ export default function RootLayout({
           <MobileCallback />
         </ModalProvider>
         <ScrollToTop />
+        <Toaster />
         <CookieNotice />
       </body>
     </html>
diff --git a/src/entities/beauty-button/ui.tsx b/src/entities/beauty-button/ui.tsx
index 9a29723..14ebf12 100644
--- a/src/entities/beauty-button/ui.tsx
+++ b/src/entities/beauty-button/ui.tsx
@@ -2,9 +2,9 @@
 
 import s from './styles.module.scss';
 import type { ReactNode } from 'react';
-import { useModal } from '@core/providers/modal-provider';
-import { ConsultationModal } from '@/feature/article';
 import { Icons } from '@/shared/ui/icon';
+import { useModal } from '@core/providers/modal-provider';
+import { ConsultationModal } from '@/widgets';
 
 type TBeautyButtonProps = {
   children?: ReactNode;
diff --git a/src/feature/article/index.ts b/src/feature/article/index.ts
index ea5a7d9..6249c6e 100644
--- a/src/feature/article/index.ts
+++ b/src/feature/article/index.ts
@@ -1,6 +1,5 @@
 export * from './related-articles';
 export * from './consultation';
 export * from './sidebar';
-export * from './consultation-modal';
 export * from './partners';
 export * from './documents';
diff --git a/src/feature/article/sidebar/ui.tsx b/src/feature/article/sidebar/ui.tsx
index 462ea99..9c91220 100644
--- a/src/feature/article/sidebar/ui.tsx
+++ b/src/feature/article/sidebar/ui.tsx
@@ -5,8 +5,8 @@ import Link from 'next/link';
 import { Button } from '@shared/ui';
 import { TSidebar } from '@shared/types/sidebar';
 import { useModal } from '@core/providers/modal-provider';
-import { ConsultationModal } from '@/feature/article';
 import { CONTACTS } from '@shared/const/contacts';
+import { ConsultationModal } from '@/widgets';
 
 type SidebarProps = { pageName?: string } & TSidebar;
 
diff --git a/src/views/home/about/styles.module.scss b/src/views/home/about/styles.module.scss
index 8245d6a..03a8171 100644
--- a/src/views/home/about/styles.module.scss
+++ b/src/views/home/about/styles.module.scss
@@ -1,8 +1,8 @@
-.About{
+.About {
   background: #f7f7f7;
 }
 
-.Inner{
+.Inner {
   margin: 0 auto;
   max-width: rem(1540px);
   padding: rem(80px) rem(10px);
@@ -20,13 +20,13 @@
   margin-bottom: rem(80px);
 }
 
-.Block{
+.Block {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: rem(40px);
 
-  @include iflaptop{
+  @include iflaptop {
     flex-direction: row;
   }
 }
@@ -49,17 +49,17 @@
   box-shadow: rem(15px) 0 rem(40px) 0 rgba(0, 0, 0, 0.5);
   transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
 
-  @include iftablet{
+  @include iftablet {
     gap: rem(80px) rem(20px);
     margin: 0 rem(40px);
     padding: rem(40px);
     max-width: rem(760px);
   }
-  @include iflaptop{
+  @include iflaptop {
     max-width: unset;
   }
 
-  .Left{
+  .Left {
     grid-area: left;
     display: flex;
     flex-direction: column;
@@ -72,24 +72,24 @@
     color: $color-white;
     text-align: center;
 
-    @include iftablet{
+    @include iftablet {
       font-size: rem(20px);
     }
 
 
-    & p:first-child{
+    & p:first-child {
       font-weight: 500;
       font-size: rem(20px);
       margin-bottom: rem(16px);
 
-      @include iftablet{
+      @include iftablet {
         font-size: rem(28px);
         margin-bottom: rem(16px);
       }
     }
   }
 
-  .Right{
+  .Right {
     grid-area: right;
     display: flex;
     flex-direction: column;
@@ -102,29 +102,39 @@
     color: $color-white;
     text-align: center;
 
-    @include iftablet{
+    @include iftablet {
       font-size: rem(20px);
     }
 
 
-    & p:first-child{
+    & p:first-child {
       font-weight: 500;
       font-size: rem(20px);
       margin-bottom: rem(16px);
 
-      @include iftablet{
+      @include iftablet {
         font-size: rem(28px);
         margin-bottom: rem(16px);
       }
     }
   }
 
-  .Bottom{
+  .Bottom {
     grid-area: bottom;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    .Btn {
+      background: #58c644;
+    }
+
+    .Icon {
+      path {
+        fill: $color-white;
+      }
+    }
   }
 
 }
@@ -134,7 +144,7 @@
   padding: rem(20px) rem(20px);
   width: 100%;
 
-  @include iftablet{
+  @include iftablet {
     flex: 1;
     display: block;
     padding: 0 rem(20px);
@@ -145,4 +155,33 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+
+.ModalContainer {
+  background: $color-white;
+  width: 100%;
+  border-radius: rem(16px);
+  padding: rem(10px) rem(10px);
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  max-width: 460px;
+  justify-content: center;
+  align-self: center;
+
+  @include iftablet{
+    max-width: unset;
+    align-self: unset;
+    width: max-content;
+    height: auto;
+  }
+
+  & > svg {
+    z-index: 1;
+    path {
+      stroke: #FFFFFF;
+      stroke-opacity: 0.8;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/home/about/ui.tsx b/src/views/home/about/ui.tsx
index f672fb7..1376536 100644
--- a/src/views/home/about/ui.tsx
+++ b/src/views/home/about/ui.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import s from './styles.module.scss';
-import { Button } from '@shared/ui';
+import { Button, Icons } from '@shared/ui';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/grid';
@@ -14,6 +14,8 @@ import lic1 from '@public/images/licence/dtr-eac-0.png';
 import lic2 from '@public/images/licence/dtr-eac-1.png';
 import lic3 from '@public/images/licence/dtr-eac-2.png';
 import lic4 from '@public/images/licence/dtr-eac-3.png';
+import { useModal } from '@core/providers/modal-provider';
+import { Preview } from '@/widgets';
 
 const slidesData = [
   {
@@ -63,6 +65,23 @@ const swiperBreakpoints = {
 };
 
 function About() {
+  const modal = useModal();
+  const openModal = () =>
+    modal.showModal(
+      <Preview className={s.ModalContainer}>
+        <iframe
+          width='560'
+          height='315'
+          src='https://www.youtube.com/embed/-CgIZzd4qNY?si=wSZSMXolujovqQxT'
+          title='YouTube video player'
+          frameBorder='0'
+          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+          referrerPolicy='strict-origin-when-cross-origin'
+          allowFullScreen
+        ></iframe>
+      </Preview>,
+    );
+
   return (
     <section className={s.About}>
       <div className={s.Inner}>
@@ -84,7 +103,10 @@ function About() {
               </p>
             </div>
             <div className={s.Bottom}>
-              <Button>Посмотреть видео о нас</Button>
+              <Button className={s.Btn} onClick={openModal}>
+                <Icons.Youtube className={s.Icon} />
+                Посмотреть видео о нас
+              </Button>
             </div>
           </div>
           <Swiper
diff --git a/src/views/home/call-us/styles.module.scss b/src/views/home/call-us/styles.module.scss
index aec334e..f4b1372 100644
--- a/src/views/home/call-us/styles.module.scss
+++ b/src/views/home/call-us/styles.module.scss
@@ -45,3 +45,19 @@
     padding: rem(20px) rem(40px);
   }
 }
+
+.Btn {
+  border: 1px solid #eeeeee44;
+}
+
+.Icon {
+  width: rem(20px);
+
+  @include iftablet{
+    width: rem(40px);
+  }
+
+  path {
+    fill: $color-white;
+  }
+}
diff --git a/src/views/home/call-us/ui.tsx b/src/views/home/call-us/ui.tsx
index 173e2ae..f7d36fe 100644
--- a/src/views/home/call-us/ui.tsx
+++ b/src/views/home/call-us/ui.tsx
@@ -1,7 +1,19 @@
+'use client';
+
 import s from './styles.module.scss';
-import { Button } from '@shared/ui';
+import { Button, Icons } from '@shared/ui';
+import { CONTACTS } from '@shared/const/contacts';
+import { useModal } from '@core/providers/modal-provider';
+import { ConsultationModal } from '@/widgets';
 
 function CallUs() {
+  const modal = useModal();
+  const openModal = () => modal.showModal(<ConsultationModal />);
+
+  const handlePhoneClick = () => {
+    window.open(`tel:${CONTACTS.PHONE}`, '_self');
+  };
+
   return (
     <section className={s.CallUs}>
       <div className={s.LeftBlock}>
@@ -9,8 +21,14 @@ function CallUs() {
         <p className={s.LineText}>Свяжитесь с нами любым удобным способом</p>
       </div>
       <div className={s.RightBlock}>
-        <Button>Написать в чат</Button>
-        <Button>Бесплатный звонок</Button>
+        <Button className={s.Btn} onClick={openModal}>
+          <Icons.MobilePhone className={s.Icon} />
+          Мы вам перезвоним
+        </Button>
+        <Button className={s.Btn} onClick={handlePhoneClick}>
+          <Icons.MobileContact className={s.Icon} />
+          Связаться с нами
+        </Button>
       </div>
     </section>
   );
diff --git a/src/feature/article/consultation-modal/index.ts b/src/widgets/consultation-modal/index.ts
similarity index 100%
rename from src/feature/article/consultation-modal/index.ts
rename to src/widgets/consultation-modal/index.ts
diff --git a/src/feature/article/consultation-modal/styles.module.scss b/src/widgets/consultation-modal/styles.module.scss
similarity index 100%
rename from src/feature/article/consultation-modal/styles.module.scss
rename to src/widgets/consultation-modal/styles.module.scss
diff --git a/src/feature/article/consultation-modal/ui.tsx b/src/widgets/consultation-modal/ui.tsx
similarity index 100%
rename from src/feature/article/consultation-modal/ui.tsx
rename to src/widgets/consultation-modal/ui.tsx
diff --git a/src/widgets/index.ts b/src/widgets/index.ts
index 509130f..2705f21 100644
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -5,3 +5,5 @@ export * from './mobile-callback';
 export * from './sidebar';
 export * from './scroll-to-top';
 export * from './cookie-notice';
+export * from './consultation-modal';
+export * from './preview-modal';
diff --git a/src/widgets/mobile-callback/ui.tsx b/src/widgets/mobile-callback/ui.tsx
index 8fcc9f9..87c40c4 100644
--- a/src/widgets/mobile-callback/ui.tsx
+++ b/src/widgets/mobile-callback/ui.tsx
@@ -5,7 +5,7 @@ import { Icons } from '@shared/ui';
 import { phoneBeautify } from '@shared/lib/phoneBeautify/phoneBeautify';
 import { CONTACTS } from '@shared/const/contacts';
 import { useModal } from '@core/providers/modal-provider';
-import { ConsultationModal } from '@/feature/article';
+import { ConsultationModal } from '@/widgets';
 
 function MobileCallback() {
   const modal = useModal();
diff --git a/src/widgets/preview-modal/index.ts b/src/widgets/preview-modal/index.ts
new file mode 100644
index 0000000..5ecdd1f
--- /dev/null
+++ b/src/widgets/preview-modal/index.ts
@@ -0,0 +1 @@
+export * from './ui';
diff --git a/src/widgets/preview-modal/styles.module.scss b/src/widgets/preview-modal/styles.module.scss
new file mode 100644
index 0000000..050a08b
--- /dev/null
+++ b/src/widgets/preview-modal/styles.module.scss
@@ -0,0 +1,27 @@
+.Container {
+  background: $color-white;
+  width: 100%;
+  border-radius: rem(16px);
+  padding: rem(10px) rem(10px);
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  max-width: 460px;
+  justify-content: center;
+  align-self: center;
+
+  @include iftablet{
+    max-width: unset;
+    align-self: unset;
+    width: max-content;
+    height: auto;
+  }
+
+  & > svg {
+    z-index: 1;
+    path {
+      stroke: #FFFFFF;
+      stroke-opacity: 0.8;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/widgets/preview-modal/ui.tsx b/src/widgets/preview-modal/ui.tsx
new file mode 100644
index 0000000..df26930
--- /dev/null
+++ b/src/widgets/preview-modal/ui.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ModalContent } from '@shared/ui';
+
+type PreviewProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+function Preview({ children, className }: PreviewProps) {
+  return (
+    <ModalContent closeByClickOutside className={className}>
+      {children}
+    </ModalContent>
+  );
+}
+
+export { Preview };