@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.71

package/src/components/Header/DropdownMenu.tsx

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+import type {
+  ContentPageContext,
+  HandlerDecorator,
+  Router,
+} from '../ContentPage/ContentPageContext';
+
+const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'bg-primary-text',
+  transparent: 'bg-white',
+};
+
+interface DropdownMenuProps extends UniBlockProps {
+  menuVisible: boolean;
+  toggleMenu: () => void;
+  menuItems: LinkProps[];
+  bgColor?: BgColorVersion;
+  context: ContentPageContext;
+}
+
+export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
+  const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+
+  const { useRouter, handlerDecorator } = context;
+
+  const router = useRouter();
+
+  return (
+    <div
+      className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
+        menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''
+      }`}
+    >
+      <button
+        className="flex justify-between items-center cursor-pointer h-6 ml-6"
+        onClick={toggleMenu}
+        aria-label={`${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+      >
+        {Array(3).fill(bgColor).map(renderDot)}
+      </button>
+      <div
+        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`}
+        aria-hidden={!menuVisible}
+      >
+        {renderDotsSubMenuItems(menuItems, router, handlerDecorator)}
+      </div>
+    </div>
+  );
+});
+
+const renderDotsSubMenuItems = (
+  menuItems: LinkProps[],
+  router: Router,
+  handlerDecorator: HandlerDecorator | undefined,
+) =>
+  menuItems?.map((_) => (
+    <a
+      key={_.href}
+      {...useLink({ router, handlerDecorator }, _)}
+      className="text-base font-light pb-4 hover:text-primary-main"
+    >
+      {_.text}
+    </a>
+  ));
+
+const renderDot = (bgColor: BgColorVersion, i: number) => (
+  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
+);

package/src/components/Header/Header.fixture.mobile.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Header } from './Header.mobile';
 
 export default {

package/src/components/Header/Header.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Header } from './Header';
 
 export default {

package/src/components/Header/HeaderSubMenu.tsx

@@ -4,14 +4,8 @@ import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { headerSubMenuObserver } from './HeaderSubMenuObserver';
-
-const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-primary-text',
-  transparent: 'bg-white',
-};
+import { DropdownMenu } from './DropdownMenu';
 
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
@@ -19,95 +13,59 @@ export interface HeaderSubMenuProps {
   bgColor?: BgColorVersion;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgColor }) => {
-  const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
+  const [menuVisible, setMenuVisible] = context.useState(false);
   const router = context.useRouter();
-  const { handlerDecorator } = context;
+  const { handlerDecorator, IntersectionObserverTag } = context;
+
+  const [visibleItemsCount, setVisibleItemsCount] = context.useState<number>(subItems.length);
+  const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
-  setTimeout(() => {
-    if (isSSR()) {
+  const activeSubItem = findActiveSubItem(router)(subItems);
+  const toggleMenu = () => setMenuVisible(!menuVisible);
+
+  const observerCallback = (itemIndex: number) => (entries: IntersectionObserverEntry[]) => {
+    if (!entries.length) {
       return;
     }
 
-    const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
-    headerSubMenu.forEach((_) => {
-      headerSubMenuObserver?.observe(_);
-    });
-  }, 200);
-
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const toggleSubMenu = () => setHiddenMenuIsShow(!subMenuIsShow);
+    const entry = entries[0];
 
-  const subMenu = subItems?.map((_) => (
-    <HeaderItem
-      key={_.href}
-      className="mr-8"
-      active={_ === activeSubItem}
-      {...useLink({ router, handlerDecorator }, _)}
-      dataItemName="header-submenu"
-      bgColor={bgColor}
-    />
-  ));
+    if (entry.intersectionRatio < 1) {
+      setVisibleItemsCount((prev) => Math.min(prev, itemIndex));
+    } else {
+      setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
+    }
+  };
 
   return (
     <nav className="relative mt-5">
-      <div className="overflow-hidden whitespace-nowrap mr-52">{subMenu}</div>
-      {renderDotsSubMenu({
-        subMenuIsShow,
-        toggleSubMenu,
-        subItems,
-        bgColor,
-        router,
-        handlerDecorator,
-      })}
+      <div className="overflow-hidden whitespace-nowrap mr-52">
+        {subItems.map((_, i) => (
+          <IntersectionObserverTag
+            Tag="span"
+            observerCallback={observerCallback(i)}
+            observerOptions={{ threshold: 1 }}
+            key={String(i)}
+          >
+            <HeaderItem
+              className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
+              active={_ === activeSubItem}
+              {...useLink({ router, handlerDecorator }, _)}
+              bgColor={bgColor}
+            />
+          </IntersectionObserverTag>
+        ))}
+      </div>
+      {dropDownMenuItems.length ? (
+        <DropdownMenu
+          context={context}
+          menuVisible={menuVisible}
+          toggleMenu={toggleMenu}
+          menuItems={dropDownMenuItems}
+          bgColor={bgColor}
+        />
+      ) : null}
     </nav>
   );
 });
-
-// TODO: add types
-const renderDotsSubMenu = ({
-  subMenuIsShow,
-  toggleSubMenu,
-  subItems,
-  bgColor,
-  router,
-  handlerDecorator,
-}) => (
-  <div
-    className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
-      subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''
-    }`}
-    data-header-submenu-visible="toggled"
-  >
-    <button
-      className="flex justify-between items-center cursor-pointer h-6 ml-6"
-      onClick={toggleSubMenu}
-      aria-label={`${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-    >
-      {Array(3).fill(bgColor).map(renderDot)}
-    </button>
-    <div
-      className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}
-      aria-hidden={!subMenuIsShow}
-    >
-      {renderDotsSubMenuItems(subItems, router, handlerDecorator)}
-    </div>
-  </div>
-);
-
-// TODO: add types
-const renderDotsSubMenuItems = (subItems, router, handlerDecorator) =>
-  subItems?.map((_) => (
-    <a
-      key={_.href}
-      {...useLink({ router, handlerDecorator }, _)}
-      data-item-name="dots-header-submenu"
-      className="text-base font-light pb-4 hover:text-primary-main"
-    >
-      {_.text}
-    </a>
-  ));
-
-const renderDot = (bgColor: BgColorVersion, i: number) => (
-  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
-);

package/src/components/Headline/Headline.fixture.mobile.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Picture } from '../../model/Picture';
 import { Headline } from './Headline';
@@ -38,19 +38,39 @@ const secondaryProps: HeadlineContent = {
 };
 
 export default {
-  default: (
+  'default left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="left" />
+    </div>
+  ),
+  'default center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="center" />
+    </div>
+  ),
+  'default right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="right" />
     </div>
   ),
 
-  primary: (
+  'primary left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="left" />
+    </div>
+  ),
+  'primary center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="center" />
+    </div>
+  ),
+  'primary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="right" />
+    </div>
+  ),
+  'primary without description': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -58,6 +78,10 @@ export default {
         image={image}
         bgColorHeadline="primary"
       />
+    </div>
+  ),
+  'primary without title': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -67,11 +91,24 @@ export default {
       />
     </div>
   ),
-  secondary: (
+
+  'secondary left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="left" />
+    </div>
+  ),
+  'secondary center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="center" />
+    </div>
+  ),
+  'secondary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="right" />
+    </div>
+  ),
+  'secondary without description': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -79,6 +116,10 @@ export default {
         image={image}
         bgColorHeadline="secondary"
       />
+    </div>
+  ),
+  'secondary without title': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}

package/src/components/Headline/Headline.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Headline } from './Headline';
 import { HeadlineContent } from './HeadlineContent';
@@ -20,24 +20,48 @@ export const HEADLINE_SECONDARY: HeadlineContent = {
 };
 
 export default {
-  default: (
+  'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} />
       <Headline className="col-span-12" context={context} {...HEADLINE} align="left" />
+    </div>
+  ),
+  'default center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE} />
+    </div>
+  ),
+  'default right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE} align="right" />
     </div>
   ),
-  primary: (
+  'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
       <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="left" />
+    </div>
+  ),
+  'primary center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
+    </div>
+  ),
+  'primary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="right" />
     </div>
   ),
-  secondary: (
+  'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
       <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="left" />
+    </div>
+  ),
+  'secondary center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
+    </div>
+  ),
+  'secondary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="right" />
     </div>
   ),

package/src/components/Insurance/Insurance.fixture.tsx

@@ -1,5 +1,5 @@
 import { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { Insurance } from './Insurance';
 
@@ -40,7 +40,7 @@ const image: Picture = {
 };
 
 export default {
-  default: (
+  'without monthly payment': (
     <div className="container grid grid-cols-12">
       <Insurance
         context={context}
@@ -51,6 +51,10 @@ export default {
         image={image}
         sum={500000}
       />
+    </div>
+  ),
+  'with monthly payment': (
+    <div className="container grid grid-cols-12">
       <Insurance
         context={context}
         className="col-span-12"

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock';
 
 export default {

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps, FuncReturnVoid } from '../../types';
 import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
 
@@ -22,9 +22,6 @@ type InsuranceSlideProps = {
   onClick: FuncReturnVoid<MouseEvent>;
 };
 
-const arrowBtnStyle =
-  'absolute w-12 h-12 min-h-12 max-h-12 top-1 z-10 mt-[25px] bg-white rounded-full text-primary-text';
-
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
   ({ className = '', context, cards = [], anchor = null }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -52,27 +49,17 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
                 setActiveSlideIndex,
               })
             : null}
+          {renderArrows({
+            handler: [handlePrevClick, handleNextClick],
+            isShown: [showPrevButton, showNextButton],
+            btnClass: ['left-[50px]', 'right-[50px]'],
+            className: 'top-[62px]',
+          })}
           {showPrevButton ? (
-            <div>
-              <ArrowButton
-                className={`${arrowBtnStyle} left-0 top-9`}
-                onClick={handlePrevClick}
-                ariaLabel="Пролистать влево"
-                data-block-control="scroll-left"
-              />
-              <div className="absolute top-0 left-0 h-[168px] w-[84px] bg-opacity-from-white" />
-            </div>
+            <div className="absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" />
           ) : null}
           {showNextButton ? (
-            <div>
-              <ArrowButton
-                className={`${arrowBtnStyle} right-0 top-9 rotate-180`}
-                onClick={handleNextClick}
-                ariaLabel="Пролистать вправо"
-                data-block-control="scroll-right"
-              />
-              <div className="absolute top-0 right-0 h-[168px] w-[100px] bg-opacity-to-white" />
-            </div>
+            <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
       </section>
@@ -89,8 +76,11 @@ function renderGallery({
 }: InsuranceGalleryProps) {
   const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
   return (
-    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000">
-      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px] px-[50px]">
+    <div
+      style={{ transform: `translateX(-${tabsShiftWidth}px)` }}
+      className="duration-1000 px-[50px]"
+    >
+      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px]">
         {cards.map((slide, i) =>
           renderSlide({
             slide,

package/src/components/LikeControl/LikeControl.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { LikeControl } from './LikeControl';
 

package/src/components/LinkDocs/LinkDocs.fixture.mobile.tsx

@@ -1,6 +1,6 @@
-import { mobileContext } from '../../setup-fixture';
-import { linkDocsContentExample } from './linkDocsContentExample';
+import { mobileContext } from '../../react/setup-fixture';
 import { LinkDocs } from './LinkDocs';
+import { linkDocsContentExample } from './linkDocsContentExample';
 
 export default {
   'vertical (default)': (

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -1,6 +1,6 @@
-import { context } from '../../setup-fixture';
-import { linkDocsContentExample } from './linkDocsContentExample';
+import { context } from '../../react/setup-fixture';
 import { LinkDocs } from './LinkDocs';
+import { linkDocsContentExample } from './linkDocsContentExample';
 
 export default {
   'two columns (default)': (

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -44,7 +44,9 @@ const formatSuffix = (ext?: string, fileSize?: string) => {
 };
 
 const getExtFromHref = (href: string) => {
-  if (!href) return '';
+  if (!href) {
+    return '';
+  }
 
   const index = href.lastIndexOf('.');
   return index !== -1 ? href.substring(index + 1) : '';

package/src/components/LinkList/LinkList.fixture.tsx

@@ -1,4 +1,4 @@
-import { mobileContext } from '../../setup-fixture';
+import { mobileContext } from '../../react/setup-fixture';
 import { LinkList } from './LinkList';
 import { linkDocsContentExample } from './linkListContentExample';
 

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { MiniGallery, MiniGalleryProps } from './MiniGallery';
 
 const image: Picture = {

package/src/components/MobileAppTile/MobileAppTile.fixture.mobile.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { MobileAppTile as MobileAppTileMobile } from './MobileAppTile.mobile';
 

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { MobileAppTile } from './MobileAppTile';
 

package/src/components/Navigation/Navigation.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Navigation } from './Navigation';
 

package/src/components/NavigatorTabs/NavigatorTabs.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { NavigatorTabs } from './NavigatorTabs';
 import tabsExample from './NavigatorTabs.example.json';
 import type { NavigatorTabsContent } from './NavigatorTabsContent';

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';

package/src/components/PictureText/PictureText.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { PictureText } from './PictureText';

package/src/components/Placeholder/Placeholder.fixture.mobile.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

package/src/components/Placeholder/Placeholder.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

package/src/components/Placeholder/Placeholder.tsx

@@ -50,8 +50,12 @@ const renderShimmer = (size = 3) =>
     .map((_) => Math.floor(_))
     .map(renderShimmerItem);
 
-const renderShimmerItem = (width = 100, index: number) => (
-  <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
+const renderShimmerItem = (width: number, index: number) => (
+  <div
+    key={String(index)}
+    style={{ width: `${width || 100}%` }}
+    className="h-4 mt-2 bg-secondary-light"
+  />
 );
 
 const goldenSequence = (first: number, size: number): number[] =>

package/src/components/ProductBlock/ProductBlock.example.json

@@ -16,11 +16,7 @@
     "alt": "",
     "title": ""
   },
-  "items": [
-    "Элемент списка 1",
-    "Элемент списка 2",
-    "Элемент списка 3"
-  ],
+  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
   "isDotted": true,
   "buttons": [
     {

package/src/components/ProductBlock/ProductBlock.fixture.mobile.tsx

@@ -1,8 +1,8 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
-import { ProductBlock } from './ProductBlock';
+import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { ProductBlock } from './ProductBlock';
 
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';
 const description =