@redneckz/wildless-cms-uni-blocks 0.2.101 → 0.2.103

package/lib/utils/url.js

@@ -1,12 +1,7 @@
-export const MOBILE_URL_PATH = '/mobile';
 export const isURL = (href) => href?.includes('//');
-export const isHrefActive = (href, router, cmp = (href, baseHref) => href === baseHref) => {
-    return cmp(withoutQuery(href), withoutMobilePath(withoutQuery(isURL(href) ? router.href : router.pathname)));
-};
 export const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
-export const withoutMobilePath = (href) => (href || '').replace(MOBILE_URL_PATH, '');
 export const getOrigin = (href) => {
-    if (!isURL(href)) {
+    if (!href || !isURL(href)) {
         return undefined;
     }
     const url = href;
@@ -15,19 +10,4 @@ export const getOrigin = (href) => {
     const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
     return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
 };
-export const adjustHref = (href, router) => {
-    if (!href) {
-        return href;
-    }
-    const relativeHref = toRelativeHref(href, router);
-    const isMobilePage = router?.pathname.startsWith(MOBILE_URL_PATH);
-    return isMobilePage && !isURL(relativeHref) ? `${MOBILE_URL_PATH}${relativeHref}` : relativeHref;
-};
-export const toRelativeHref = (href, router) => {
-    if (!href) {
-        return href;
-    }
-    const origin = getOrigin(router?.href);
-    return origin ? href.replace(origin, '') || '/' : href;
-};
 //# sourceMappingURL=url.js.map

package/lib/utils/url.js.map

@@ -1 +1 @@
-{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC;AAEzC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AAE7D,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,IAAwB,EACxB,MAA4C,EAC5C,MAAmD,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ,EACxF,EAAE;IACF,OAAO,GAAG,CACR,YAAY,CAAC,IAAI,CAAC,EAClB,iBAAiB,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAC7E,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;AAE9F,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAa,EAAE,EAAE;IACzC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QAChB,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,GAAG,GAAG,IAAK,CAAC;IAClB,MAAM,cAAc,GAAG,IAAI,CAAC;IAC5B,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IACzE,OAAO,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,IAAwB,EACxB,MAA2C,EAC3C,EAAE;IACF,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,MAAM,YAAY,GAAG,cAAc,CAAC,IAAI,EAAE,MAAM,CAAE,CAAC;IACnD,MAAM,YAAY,GAAG,MAAM,EAAE,QAAQ,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAClE,OAAO,YAAY,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;AACnG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAwB,EAAE,MAAyB,EAAE,EAAE;IACpF,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;AACzD,CAAC,CAAC"}
+{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AAE7D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAa,EAAE,EAAE;IACzC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACzB,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,GAAG,GAAG,IAAI,CAAC;IACjB,MAAM,cAAc,GAAG,IAAI,CAAC;IAC5B,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IACzE,OAAO,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAClE,CAAC,CAAC"}

package/lib/utils/withoutMobilePath.d.ts

@@ -0,0 +1,2 @@
+export declare const MOBILE_URL_PATH = "/mobile";
+export declare const withoutMobilePath: (href?: string) => string;

package/lib/utils/withoutMobilePath.js

@@ -0,0 +1,3 @@
+export const MOBILE_URL_PATH = '/mobile';
+export const withoutMobilePath = (href) => (href || '').replace(MOBILE_URL_PATH, '');
+//# sourceMappingURL=withoutMobilePath.js.map

package/lib/utils/withoutMobilePath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withoutMobilePath.js","sourceRoot":"","sources":["../../src/utils/withoutMobilePath.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.101",
+  "version": "0.2.103",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -142,7 +142,9 @@
   ],
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,css}": [
-      "prettier --write",
+      "prettier --write"
+    ],
+    "src/**/*.{js,jsx,ts,tsx}": [
       "eslint"
     ],
     "*.{js,jsx,ts,tsx,css,json}": [

package/src/components/BlockContent.ts

@@ -6,6 +6,7 @@ import type { GalleryContent } from './Gallery/GalleryContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
+import type { NavigationContent } from './Navigation/NavigationContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -13,9 +14,9 @@ import type { ProductGalleryContent } from './ProductGallery/ProductGalleryConte
 import type { ProductTileContent } from './ProductTile/ProductTileContent';
 import type { PromoTileContent } from './PromoTile/PromoTileContent';
 import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
+import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
-import { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 
 /**
  * @hidden
@@ -38,4 +39,5 @@ export type BlockContent =
   | StepsBlockContent
   | TariffsTableContent
   | TextBlockContent
-  | TileContent;
+  | TileContent
+  | NavigationContent;

package/src/components/Blocks.ts

@@ -10,6 +10,7 @@ import { Headline } from './Headline/Headline';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { Navigation } from './Navigation/Navigation';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -44,4 +45,5 @@ export const Blocks = {
   TariffsTable,
   TextBlock,
   Tile,
+  Navigation,
 };

package/src/components/ContentPage/ContentPage.page.json

@@ -18,25 +18,38 @@
           "type": "Header",
           "style": ["-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
           "content": {
-            "defaultLocation": "Москва",
-            "topItems": [
-              {
-                "href": "https://rshb.ru/",
-                "text": "Бизнес клиентам",
-                "target": "_blank"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Частным клиентам",
-                "target": "_blank"
-              }
-            ]
+            "defaultLocation": "Москва"
           }
         }
       ]
     }
   },
   "blocks": [
+    {
+      "type": "Navigation",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Потребительский кредит наличными",
+        "buttons": [
+          {
+            "href": "/credits",
+            "text": "Оформить"
+          },
+          {
+            "href": "/tariffs",
+            "text": "Тарифы"
+          },
+          {
+            "href": "/harvest",
+            "text": "Урожай"
+          },
+          {
+            "href": "/faq",
+            "text": "Частые вопросы"
+          }
+        ]
+      }
+    },
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],

package/src/components/Footer/FooterContent.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { SitemapProps } from '../../model/SitemapProps';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Тип контакта

package/src/components/Footer/Sitemap.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { useSitemap } from '../../hooks/useSitemap';
-import { mergeTopItems } from '../../mergeTopItems';
 import type { LinkProps } from '../../model/LinkProps';
-import type { TopMenuItem } from '../../model/SitemapProps';
+import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
+import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
+
 export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
 }

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

@@ -1,21 +1,7 @@
 import { context } from '../../setup-fixture';
 import { Header } from './Header';
 
-export default (
-  <Header
-    context={context}
-    defaultLocation="Москва"
-    topItems={[
-      {
-        href: 'https://rshb.ru/',
-        text: 'Бизнес клиентам',
-        target: '_blank',
-      },
-      {
-        href: 'https://rshb.ru/',
-        text: 'Частным клиентам',
-        target: '_blank',
-      },
-    ]}
-  />
-);
+export default {
+  default: <Header context={context} defaultLocation="Москва" />,
+  transparent: <Header context={context} defaultLocation="Москва" bgColor="transparent" />,
+};

package/src/components/Header/Header.tsx

@@ -1,61 +1,72 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { useSitemap } from '../../hooks/useSitemap';
-import { mergeTopItems } from '../../mergeTopItems';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
+import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
-import { isSubItemActive } from './isSubItemActive';
-import { isTopItemActive } from './isTopItemActive';
+
+const BORDER_COLORS: Record<BgColorVersion, string> = {
+  'bg-white': 'bg-main-divider',
+  transparent: 'bg-main-divider opacity-30',
+};
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, topItems }) => {
-  const router = context.useRouter();
-  const sitemap = useSitemap(context.useAsyncData);
-  const { handlerDecorator } = context;
+export const Header = JSX<HeaderProps>(
+  ({ className, defaultLocation, bgColor = 'bg-white', context, topItems }) => {
+    const router = context.useRouter();
+    const sitemap = useSitemap(context.useAsyncData);
+    const { handlerDecorator } = context;
 
-  const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-  const activeTopItem = mergedItems.find(isTopItemActive(router));
-  const subItems = activeTopItem?.items;
-  const activeSubItem = subItems?.find(isSubItemActive(router));
+    const mergedItems = mergeTopItems(sitemap.topItems, topItems);
+    const activeTopItem = mergedItems.find(isTopItemActive(router));
+    const subItems = activeTopItem?.items;
+    const activeSubItem = findActiveSubItem(router)(subItems);
 
-  const topMenu = mergedItems.map((_, i) => (
-    <TopItem
-      key={String(i)}
-      active={_ === activeTopItem}
-      {...useLink({ router, handlerDecorator }, _)}
-      ariaLabel={_.text}
-    />
-  ));
+    const topMenu = mergedItems.map((_, i) => (
+      <TopItem
+        key={String(i)}
+        active={_ === activeTopItem}
+        {...useLink({ router, handlerDecorator }, _)}
+        ariaLabel={_.text}
+        bgColor={bgColor}
+      />
+    ));
 
-  const subMenu = subItems?.map((_) => (
-    <HeaderItem
-      key={_.href}
-      className="mr-8"
-      active={_ === activeSubItem}
-      {...useLink({ router, handlerDecorator }, _)}
-    />
-  ));
+    const subMenu = subItems?.map((_) => (
+      <HeaderItem
+        key={_.href}
+        className="mr-8"
+        active={_ === activeSubItem}
+        {...useLink({ router, handlerDecorator }, _)}
+        bgColor={bgColor}
+      />
+    ));
 
-  return (
-    <header className={`pt-5 pb-8 px-20 bg-white ${className || ''}`}>
-      <div className="container">
-        <div className="flex items-center">
-          <Logo className="mr-8" />
-          {topMenu}
-          <HeaderSecondaryMenu
-            context={context}
-            className="ml-auto"
-            defaultLocation={defaultLocation}
-          />
+    return (
+      <header className={`pt-5 pb-8 px-20 ${bgColor} ${className || ''}`}>
+        <div className="container">
+          <div className="flex items-center">
+            <Logo className="mr-8" bgColor={bgColor} />
+            {topMenu}
+            <HeaderSecondaryMenu
+              context={context}
+              className="ml-auto"
+              defaultLocation={defaultLocation}
+              bgColor={bgColor}
+            />
+          </div>
+          <div className={`mt-5 h-[1px] ${BORDER_COLORS[bgColor]}`} />
+          <nav className="mt-5">{subMenu}</nav>
         </div>
-        <div className="mt-5 h-[1px] bg-main-divider" />
-        <nav className="mt-5">{subMenu}</nav>
-      </div>
-    </header>
-  );
-});
+      </header>
+    );
+  },
+);

package/src/components/Header/HeaderContent.ts

@@ -1,4 +1,5 @@
-import type { SitemapProps } from '../../model/SitemapProps';
+import { BgColorVersion } from '../../model/BgColorVersion';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Шапка
@@ -10,4 +11,10 @@ export interface HeaderContent extends SitemapProps {
    * @default Москва
    */
   defaultLocation?: string;
+  /**
+   * @title Фон элемента
+   * @hidden
+   * @default white
+   */
+  bgColor?: BgColorVersion;
 }

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,20 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
-  className?: string;
+  bgColor?: BgColorVersion;
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent, UniBlockProps {}
 
+const COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-text hover:text-primary-main',
+  transparent: 'text-white',
+};
+const DOP_LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'text-secondary-light hover:text-secondary-hover',
+  transparent: 'text-white',
+};
+const DOP_LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
+  'bg-white': 'GridIcon',
+  transparent: 'GridIconWhite',
+};
+
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ context, className, defaultLocation = '' }) => {
+  ({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
-
     return (
       <div className={`flex items-center ${className || ''}`}>
         <TopItem
@@ -24,6 +38,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           text={city}
           ariaLabel="Местоположение"
           onClick={getCity}
+          bgColor={bgColor}
         />
         <TopItem
           className="mr-7"
@@ -31,24 +46,22 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           href="#"
           text="Офисы и банкоматы"
           ariaLabel="Список всех доступных офисов и банкоматов"
+          bgColor={bgColor}
         />
         <HeaderSecondaryMenuButton
-          className="mr-5 text-primary-text hover:text-primary-main"
+          className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Icon name="LoupeIcon" aria-hidden="true" className="h-full" asSVG />
+          <Icon name="LoupeIcon" className="h-full" asSVG />
         </HeaderSecondaryMenuButton>
-        <HeaderSecondaryMenuButton
-          className="mr-5 text-primary-text hover:text-primary-main"
-          ariaLabel="Профиль"
-        >
-          <Icon name="ProfileIcon" aria-hidden="true" className="h-full" asSVG />
+        <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
+          <Icon name="ProfileIcon" className="h-full" asSVG />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className="min-w-[32px] min-h-[32px] fill-secondary-light hover:fill-secondary-hover"
+          className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Icon name="GridIcon" aria-hidden="true" className="h-full" asSVG />
+          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -6,12 +6,10 @@ interface HeaderSecondaryMenuButtonProps {
 }
 
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
-  ({ className, children, ariaLabel }) => (
+  ({ className = '', children, ariaLabel }) => (
     <button
       type="button"
-      className={`border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${
-        className || ''
-      }`}
+      className={`border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${className}`}
       disabled={true}
       aria-label={ariaLabel}
     >

package/src/components/Headline/HeadlineContent.ts

@@ -1,18 +1,10 @@
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 
-/**
- * @title Цвет фона
- * @enumNames [
- *    "Прозрачный",
- *    "Белый"
- * ]
- */
-export type HeadlineBgColor = 'transparent' | 'bg-white';
-
 /**
  * @title Заголовок
  */
 export interface HeadlineContent
   extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align'> {
-  bgColor?: HeadlineBgColor;
+  bgColor?: BgColorVersion;
 }

package/src/components/MobileBlocks.ts

@@ -4,6 +4,7 @@ import { Gallery } from './Gallery/Gallery.mobile';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { Navigation } from './Navigation/Navigation';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock.mobile';
@@ -24,4 +25,5 @@ export const MobileBlocks = {
   ProductTile,
   TextBlock,
   Tile,
+  Navigation,
 };

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

@@ -0,0 +1,28 @@
+import { context } from '../../setup-fixture';
+
+import { Navigation } from './Navigation';
+
+export default () => (
+  <Navigation
+    title="Потребительский кредит наличными"
+    buttons={[
+      {
+        href: '/credits',
+        text: 'Оформить',
+      },
+      {
+        href: '/tariffs',
+        text: 'Тарифы',
+      },
+      {
+        href: '/harvest',
+        text: 'Урожай',
+      },
+      {
+        href: '/faq',
+        text: 'Частые вопросы',
+      },
+    ]}
+    context={context}
+  />
+);

package/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import type { UniBlockProps } from '../../types';
+import { NavigationContent } from './NavigationContent';
+import { NavigationItem } from './NavigationItem';
+
+export interface NavigationProps extends NavigationContent, UniBlockProps {}
+
+export const Navigation = JSX<NavigationProps>(({ className, context, title, buttons }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+
+  const activeButton = findActiveSubItem(router)(buttons);
+
+  return (
+    <section
+      className={`font-sans text-primary-text rounded-[40px] flex items-center justify-between ${
+        className || ''
+      }`}
+    >
+      <h2 className="font-medium text-xl m-0">{title}</h2>
+      {buttons?.length ? (
+        <div className="flex rounded-md overflow-hidden bg-white">
+          {buttons
+            .filter(({ text }) => text)
+            .map((button, i) => (
+              <NavigationItem
+                key={String(i)}
+                className="first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md"
+                isActive={button === activeButton}
+                {...useLink({ router, handlerDecorator }, button)}
+              />
+            ))}
+        </div>
+      ) : null}
+    </section>
+  );
+});

package/src/components/Navigation/NavigationContent.ts

@@ -0,0 +1,11 @@
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Навигация
+ */
+export interface NavigationContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список ссылок */
+  buttons?: ButtonProps[];
+}

package/src/components/Navigation/NavigationItem.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+export const NavigationItem = JSX<ButtonProps & { isActive: boolean }>(
+  ({ className, text, onClick, href, target, isActive }) => (
+    <a
+      className={`bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${
+        className || ''
+      } ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`}
+      onClick={onClick}
+      href={href}
+      target={target}
+    >
+      {text}
+    </a>
+  ),
+);

package/src/hooks/useLink.ts

@@ -1,6 +1,7 @@
 import { HandlerDecorator, Router } from '../components/ContentPage/ContentPageContext';
 import type { LinkProps } from '../model/LinkProps';
-import { adjustHref, isURL } from '../utils/url';
+import { adjustHref } from '../utils/adjustHref';
+import { isURL } from '../utils/url';
 
 const defaultHandlerDecorator: HandlerDecorator = (handler) => handler;
 

package/src/icons/GridIcon.svg

@@ -1,4 +1,4 @@
 <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 33">
-    <rect fill="#F5F7F9" width="32" height="32" y=".5" rx="16"/>
+    <rect fill="currentColor" width="32" height="32" y=".5" rx="16"/>
     <path fill="#1C1C1C" d="M13 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM13 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM16.5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 21.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM23 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
 </svg>

package/src/icons/GridIconWhite.svg

@@ -0,0 +1,4 @@
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 33">
+    <rect fill="rgba(255, 255, 255, 0.2)" width="32" height="32" y=".5" rx="16"/>
+    <path fill="#FFFFFF" d="M13 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM13 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM16.5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 21.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM23 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
+</svg>

package/src/index.ts

@@ -18,9 +18,9 @@ export { ContentPageHead } from './components/ContentPage/ContentPageHead';
 export { toMobilePage } from './components/ContentPage/toMobilePage';
 export { MobileBlocks } from './components/MobileBlocks';
 export type { Img, ImgSource, Picture } from './model/Picture';
-export type { SitemapProps as SitemapContent } from './model/SitemapProps';
 export { projectSettings } from './ProjectSettings';
 export type { ProjectSettings } from './ProjectSettings';
+export type { SitemapProps as SitemapContent } from './services/sitemap/SitemapProps';
 export type { BlockDef, ContentPageDef, ContentPageMeta, UniBlockProps } from './types';
 export { joinList } from './utils/joinList';
 export * as url from './utils/url';

package/src/model/BgColorVersion.ts

@@ -0,0 +1,8 @@
+/**
+ * @title Цвет фона
+ * @enumNames [
+ *    "Прозрачный",
+ *    "Белый"
+ * ]
+ */
+export type BgColorVersion = 'transparent' | 'bg-white';