Create a mask when preview=true query parameter is present

components/PreviewPageMask/PreviewPageMask.module.scss

@@ -0,0 +1,6 @@
+.mask {
+    position: fixed;
+    inset: 0;
+    background: transparent;
+    z-index: 9999;
+}

components/PreviewPageMask/PreviewPageMask.tsx

@@ -0,0 +1,14 @@
+import { useSearchParams } from 'next/navigation';
+
+import styles from './PreviewPageMask.module.scss';
+
+export function PreviewPageMask() {
+    const searchParams = useSearchParams();
+    const preview = JSON.parse(searchParams.get('preview') ?? 'false');
+
+    if (!preview) {
+        return null;
+    }
+
+    return <div className={styles.mask} />;
+}

components/PreviewPageMask/index.ts

@@ -0,0 +1 @@
+export { PreviewPageMask } from './PreviewPageMask';

modules/Layout/Layout.tsx

@@ -11,6 +11,7 @@ import type { PropsWithChildren } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 
 import { NotificationsBar } from '@/components';
+import { PreviewPageMask } from '@/components/PreviewPageMask';
 import { IconArrowTop } from '@/icons';
 import { LoadingBar, ScrollToTopButton } from '@/ui';
 
@@ -106,6 +107,7 @@ function Layout({ title, description, imageUrl, hasError, children }: PropsWithC
                     icon={IconArrowTop}
                     iconClassName={styles.scrollToTopIcon}
                 />
+                <PreviewPageMask />
             </div>
         </>
     );