@redneckz/wildless-cms-uni-blocks 0.2.109 → 0.2.113

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

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import type { SubMenuItem } from './HeaderContent';
+
+export interface HeaderBurgerProps {
+  context: ContentPageContext;
+  onClick: () => void;
+  burgerSubMenu?: SubMenuItem[];
+  defaultLocation?: string;
+  children?: any;
+}
+
+export const HeaderBurger = JSX<HeaderBurgerProps>(
+  ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
+    const [city, getCity] = context.useGeolocation(defaultLocation);
+
+    return (
+      <div className="absolute top-0 left-0 w-full h-full bg-white p-4">
+        <button className="absolute top-4 right-4" onClick={onClick}>
+          <Icon name="CloseIcon" width="24" height="24" asSVG />
+        </button>
+        <Button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4">
+          <Icon name="GeolocationIcon" width="24" height="24" className="box-border mr-2" asSVG />
+          {city}
+        </Button>
+        {children}
+        <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>
+        <SearchBar context={context} className="grow" />
+      </div>
+    );
+  },
+);
+
+const renderBurgerSubMenuItem = (menu: SubMenuItem, i: number) => {
+  const { icon, href, text } = menu;
+  return (
+    <Button key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4">
+      {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
+      <span className="pl-0.5 font-medium">{text}</span>
+    </Button>
+  );
+};

package/mobile/src/components/Header/HeaderContent.ts

@@ -0,0 +1,30 @@
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+
+/**
+ * @title Пункт подменю
+ */
+export interface SubMenuItem extends LinkProps {
+  icon?: IconName;
+}
+/**
+ * @title Шапка
+ * @required ["defaultLocation", "topItems"]
+ */
+export interface HeaderContent extends SitemapProps {
+  /**
+   * @title Город по-умолчанию
+   * @default Москва
+   */
+  defaultLocation?: string;
+  /**
+   * @title Фон элемента
+   * @hidden
+   * @default white
+   */
+  bgColor?: BgColorVersion;
+  /** @title Подменю */
+  burgerSubMenu?: SubMenuItem[]; // TODO: для мобильной версии
+}

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

@@ -0,0 +1,69 @@
+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;
+  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 = '', bgColor = 'bg-white' }) => {
+    const [city, getCity] = context.useGeolocation(defaultLocation);
+    return (
+      <div className={`flex items-center ${className || ''}`}>
+        <TopItem
+          className="mr-5"
+          flat={true}
+          href="#"
+          text={city}
+          ariaLabel="Местоположение"
+          onClick={getCity}
+          bgColor={bgColor}
+        />
+        <TopItem
+          className="mr-7"
+          flat={true}
+          href="#"
+          text="Офисы и банкоматы"
+          ariaLabel="Список всех доступных офисов и банкоматов"
+          bgColor={bgColor}
+        />
+        <HeaderSecondaryMenuButton
+          className={`mr-5 ${COLORS_MAP[bgColor]}`}
+          ariaLabel="Поиск по сайту"
+        >
+          <Icon name="LoupeIcon" className="h-full" asSVG />
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
+          <Icon name="ProfileIcon" className="h-full" asSVG />
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
+          ariaLabel="Дополнительные ссылки"
+        >
+          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG />
+        </HeaderSecondaryMenuButton>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+interface HeaderSecondaryMenuButtonProps {
+  className?: string;
+  ariaLabel?: string;
+}
+
+export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
+  ({ className = '', children, ariaLabel }) => (
+    <button
+      type="button"
+      className={`border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${className}`}
+      disabled={true}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  ),
+);

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

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Logo } from '../../ui-kit/Logo/Logo';
+
+export interface HeaderTopProps {
+  onClick: () => void;
+  bgColor?: BgColorVersion;
+}
+
+export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
+  <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
+    <div className="flex items-center">
+      <button className="pr-4" onClick={onClick}>
+        <Icon
+          name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
+          width="24"
+          height="24"
+          asSVG
+        />
+      </button>
+      <Logo bgColor={bgColor} />
+    </div>
+    <button className={`${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm`}>
+      Войти
+    </button>
+  </div>
+));

package/mobile/src/components/Headline/Headline.example.json

@@ -0,0 +1,6 @@
+{
+  "title": "Заголовок",
+  "description": "Описание",
+  "align": "center",
+  "bgColor": "transparent"
+}

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

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+import type { HeadlineContent } from './HeadlineContent';
+
+export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
+
+export const Headline = JSX<HeadlineProps>(
+  ({ bgColor = 'transparent', className = '', title, description, image }) => {
+    return (
+      <section className={`px-4 py-6 ${bgColor} ${className}`}>
+        {title && (
+          <Title size="L" className="text-primary-text mt-0 font-medium">
+            {title}
+          </Title>
+        )}
+        {description && (
+          <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
+        )}
+        {image?.src && (
+          <div className="mt-5 mx-auto flex justify-center">
+            <Img image={image} />
+          </div>
+        )}
+      </section>
+    );
+  },
+);

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -0,0 +1,11 @@
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Заголовок
+ */
+export interface HeadlineContent
+  extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align' | 'image'> {
+  //TODO: image for mobile
+  bgColor?: BgColorVersion;
+}

package/mobile/src/components/LikeControl/LikeControl.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LikeButton } from '../../ui-kit/Button/LikeButton';
+import type { UniBlockProps } from '../../types';
+
+export const LikeControl = JSX<UniBlockProps>(({ className, context }) => {
+  const likeService = context.useLikeService();
+
+  return (
+    <div
+      className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
+        className || ''
+      }`}
+    >
+      <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
+      <LikeButton
+        onClick={likeService.dislike}
+        className="rotate-180"
+        ariaLabel="Поставить отметку «дизлайк»"
+      />
+      <span className="select-none">{likeService.likeCount}</span>
+    </div>
+  );
+});

package/mobile/src/components/LinkDocs/LinkDocs.example.json

@@ -0,0 +1,26 @@
+{
+  "title": "Дополнительные документы",
+  "icon": "DocIcon",
+  "documents": [
+    {
+      "text": "Документ №1",
+      "href": "/documents/document1.doc",
+      "fileSize": "123КБ"
+    },
+    {
+      "text": "Документ №2",
+      "href": "/documents/document2.rtf",
+      "target": "_blank"
+    },
+    {
+      "text": "Документ №3",
+      "href": "/abc3/map.jpeg",
+      "fileSize": "2МБ"
+    },
+    {
+      "text": "Документ №4",
+      "href": "/abc/map.rar"
+    }
+  ],
+  "columnsMode": "double"
+}

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

@@ -0,0 +1,82 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import { AlignType } from '../BaseTile/BaseTileProps';
+import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
+
+const titleAlignStyleMap: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
+  double: 'mb-8',
+  single: 'mb-[26px]',
+};
+
+const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
+  double: 'gap-x-5 gap-y-[26px] flex-wrap',
+  single: 'gap-3.5 flex-col',
+};
+
+export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
+
+export const LinkDocs = JSX<LinkDocsProps>(
+  ({ className = '', title, align, documents, icon, columnsMode = 'single' }) => {
+    const containerClasses = linkColumnsModeStyleMap[columnsMode];
+
+    return (
+      <section className={`font-sans p-[50px] bg-white ${className}`}>
+        {title && (
+          <Title
+            className={`font-medium mt-0 ${titleMarginsStyleMap[columnsMode]} ${
+              titleAlignStyleMap[align ?? 'center']
+            }`}
+          >
+            {title}
+          </Title>
+        )}
+        <div className={`flex ${containerClasses}`} role="list">
+          {documents?.length
+            ? documents.map(({ text, fileSize, ...linkProps }, i) => (
+                <a
+                  key={String(i)}
+                  className={`group flex text-sm align-middle h-fit
+                   text-primary-text no-underline hover:text-primary-main
+                   ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`}
+                  role="listitem"
+                  {...linkProps}
+                >
+                  {icon && <Icon className="mr-2.5 h-fit" name={icon} width="24px" height="24px" />}
+                  <span className="self-center">
+                    {text}
+                    <span className="text-secondary-text group-hover:text-primary-main">
+                      {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+                    </span>
+                  </span>
+                </a>
+              ))
+            : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+const getExtFromHref = (href: string) => {
+  if (!href) return '';
+
+  const lastChunk = href.split('.').pop();
+  if (!lastChunk || lastChunk.includes('/')) return '';
+
+  return lastChunk;
+};
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+  return prefix + extension + size;
+};

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -0,0 +1,26 @@
+import { LinkProps } from '../../model/LinkProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+
+/** @title Режим отображения списка */
+export type LinkColumnsMode = 'single' | 'double';
+
+/**
+ * @title Элемент списка
+ */
+export interface LinkDocsItem extends LinkProps {
+  /** @title размер файла */
+  fileSize?: string;
+}
+
+/**
+ * @title Список документов
+ */
+export interface LinkDocsContent extends Pick<BaseTileCommonProps, 'title' | 'align'> {
+  /** @title Отображение списка */
+  columnsMode?: LinkColumnsMode;
+  /** @title Название иконки */
+  icon?: IconName;
+  /** @title Список */
+  documents?: LinkDocsItem[];
+}

package/mobile/src/components/MiniGallery/MiniGallery.example.json

@@ -0,0 +1,50 @@
+{
+  "title": "Мини-галерея",
+  "description": "Описание",
+  "cards": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 1",
+      "description": "Описание 1"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 2",
+      "description": "Описание 2"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 3",
+      "description": "Описание 3"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 120,
+          "height": 70
+        }
+      },
+      "title": "Заголовок 4",
+      "description": "Описание 4"
+    }
+  ]
+}

package/mobile/src/components/MiniGallery/MiniGallery.tsx

@@ -0,0 +1,10 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { GalleryInner } from '../Gallery/GalleryInner';
+import type { MiniGalleryContent } from './MiniGalleryContent';
+
+export interface MiniGalleryProps extends MiniGalleryContent, UniBlockProps {}
+
+export const MiniGallery = JSX<MiniGalleryProps>((props) => (
+  <GalleryInner {...props} version="mini" />
+));

package/mobile/src/components/MiniGallery/MiniGalleryContent.ts

@@ -0,0 +1,6 @@
+import type { GalleryContent } from '../Gallery/GalleryContent';
+
+/**
+ * @title Мини-галерея
+ */
+export type MiniGalleryContent = GalleryContent;

package/mobile/src/components/MobileAppTile/MobileAppTile.example.json

@@ -0,0 +1,22 @@
+{
+  "qr": {
+    "href": "https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true",
+    "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACkCAYAAAAZtYVBAAAAAXNSR0IArs4c6QAACp1JREFUeF7tndtuKzkMBJ3//+gssG8aA1MoNDXWcTqvlCiqWSI1vuXn9/f399W/KnCIAj8F8pBMNIz/FSiQBeEoBQrkUeloMAWyDBylQIE8Kh0NpkCWgaMUKJBHpaPBFMgycJQCBfKodDSYAlkGjlKgQB6VjgZTIMvAUQoUyKPS0WAKZBk4SoECeVQ6GkwM5M/Pz6Mq2o9vUnxXf9fxtB75T8U5Pb7r/kgv0qNAXj6fXCAJmXt7gQT9qIKdXoFOj68VUn7jokCefaW6Aj3estOS/Rbg5Y5q/adAUgOjeNIrQOrfrk/7nc5PgbwoQC2REpQCkyaYgCM77Y/s0/5bIeGhhhJSINcrAelBehbIAkmM3Nr/uQpJdzh6SqMNk386sbvnU7bpymDt9gpA+0/zQ/t//A65e8Pkv0Det1TSr0DKF6pJ0AJZIJdDRcCkJ5D8F8gC+VEgCcD0jkV3Ojpg9k5l47Xj6UDTfuiOb/e7/Sl794ZTQWi+tVMCbYIsYHb87vzY/RZIeCeoQK5IUYewHerrn7KtIBY4SkgrZPbrjl9XIalFpEClAFNLTeOn/ZF9en3y9/UVkgSwCaHx1l4g7zPUCgmfeLfAUQUtkAVyUYAAozsgAUf2AvlhIKmFkp0STPbdAFD89gDYA2HH24c+2p/VH/2lvzE+HRABRAkmwadfdyOBKd7p+bQe6UPx2PxofwXyXjJKMAn+9Hxar0BSxsBOFZjsdKIpPErwafMp3j8HJCUotVvBCdi/Zk/1p/kp8OMv+1DAqb1Aru+E2AOV6k/zC+Twe9HfDjwBldoLZIFcGKIDlQJH8z8OJAW4225fxqF4bELjBAz/NlIaD+mz2x7fIXcHSP4L5KpQgSRiNtsLZIHcjJhzXyAL5KLA0y872JZEwNKdMbVfj1ca/3Q87vi/XjZ+6z++QxbI+9cFC6RDskCG3wOnilUgC+TtlYIAsRW/QDrgaPR4haQFUyCu8y1AFJ+9I02vT/GRfqQPzZ++c9v9FMiLYgXy/hd3qSNY/d4O0PTnIe2JSDc4XaGsoNPrp/q1QoZvfRVIi6B73TFtwbbF2wM9XiGtnFRR6ISnG0792wQ/rQ+tZwuAzRetT/b4DkkLTANQIFdF6YCkFa5AXhTcLYj1TwCkB2Y6ngIJJTMVPE34dMWmhD/dQWi9tmxZ8aaBpYpGQNF8m2B7IGh9AjDdH/kfLxDpyz4UcJoA2jABbBNKgNkEPx0/5cPuz/qj8WQ/7qGGAEsBJ0Fswmh8gSTFLw9prZCrIARYK+S9Xg6/99HbKyRVvNROFdMKRBXN+rPjSQ/yR/OnrzDTehXIS4anBSaA6EDZeAokKG4FopZJCbIVgFqwBSodT3qRf5pv9UnzQfG+Hcjdd0grUCqAFbxA3iOT5uM4IKklWSAIOKqgNh4r6PR+yJ898E/7s/ptv0NaAAioAjn72z62Ak7r/3jLLpD3/yaDEvx0RZuuuK2Qly9tkSAWCPJHANkDSv6mAZr2Z/Xa3rLtBne3EIqHgLFXCtqPTdi0P1qf1iM9yP/jLZsAmLanFaVArgoUyPB70gXS1qQ/9rLPdAWkE1sg/ziQ9qFg+s4xK//rRQfItnTyR/rRASQ7HVDaj52f5iN+qCFBn95QLAj8Ii8lkAAhO+k1DTjth+JJ9R5/qCmQ6xfrCTiyEwAFEo5AgSyQk1VyvGVTBZi2WzGowlALozsw+Se7XZ8KAulN+qX7Jf/bWzYJMG3XGx6+I6YApQkvkJcM0InfbS+Q2Y9DkX7pgSH/rZCtkIqRfw5I27JIDaqo0+uRv91PvdZ/Oj6db69clO/xCkkJpROWzrcAk0DpnYwSRuvb+XZ8gQw/DkZAF0j3o/sFskBSUVzstuLZ8QUSPr2jsvXi/5NCLZcSQvHYivz0eNof6WMBpw5Gen78DkmC0AZIAOuf/D19x00BLpAXBUhQCwwJTMCkgJN/Apr0mPZPepH+rZBEzMVuASD35G8aGFovBbhADldIShgBQgBau60YBATFn+4/jTfVx84//g6ZJiQVhICilkfzC+R9huJP+1iBKaEF8v573NN6pwfY5ovWK5CgUNoCKWH2zlggIWFU8WwL2y34bsCwAsA/mrLxEfCpnrvjGb9DFkhCcLWTXrsBoIps7WnBKZDhO0e2IlGFooRagOl4WOB2H5ACWSAXBgg4stOBogPyOJBUUT5dAaxglADaT7qenU/6k7+0opL/Ahn+99oC6X6fskDCVxSmK5htaTZB6fhWyIuCJAgBQvPpoWE3MLv9F0ipgL1jkHtKMNmppdL6dj8UDx0oOpAU7/R+d69H/uN3amwCKSCbYEooAZFWWBsvrUf6kD3dL/lPDwD5L5AXhewBK5DuvfcCOfydnhTYVsh7JLdXyDQB1IIsINRy6ApAJ5zipfm0vq3I5I/iIb3sfBpfIMN3bqYTRgAVSECaKlQrJNWE1V4gwx5TIFegQjnfflKaKjDpT4C748JfQ7b+3gpW+s83SRAbIAlILYvWI2BoP7vtaUeh/ZOd9KH47PwCCU/du4Ej/5RwAiq1W6Dsfii+xx9qMKDhT1RTyyMAqCJP2yke0i+1F8iLgm3Z7iEnBdAeWDowFujxlj0tiPWXtgyab+02fgLCrm+BSP3TfKtH3LLtgtPjU0FovrWn+9t9BbAVzu7fHohWSLgipEAUyOy97VZI+YFeArZAfhhIeghJE0R3LNuCpsdTfLblpXrRgUnttN80/rhCFsg1BdMJtwlO16f5BfKiAF2aqSK1QrovaVHBoXzYA9UKGf7fGqoYdEAo4TahVOFSO+3Xxjv+lE2CxwFufuigBKXxpxXEAmvXS/1P53+8QlpBKOG0YWunE24TRPGneth47Hqpf9Kf9GmFhDupTRAJbgGhO+70ena/1FHi/Z728TNKiBWEBCd/BADZ4wTJX9qw65E+tqPY9R+vkLs3TC1j2j4NIOlDCab5FC/Z7YGleGm97XdIKxgJ8Gk7CWoTQvqQP5pP8ZKd9KYKSv5bIeFLXTYBaUIIqAIpkbYtkdwTEJ+22/hpfIFcFfrzLXsaGDqgdr3pA2gfGtN4aX5bdvhLFtSiC+Rhn/ahE00nhuZP2yke21ILZIFcmLLAFsifW/2sPvQQhv52vzBOFSZtgeQ/Fki+l273Q+MxgfKFc7teWvEp/q+/Q1rBSTBKiD0QdryNj8ZbfWj/dj0a/3VP2VZwFKgVMmrppG8rpFSIKoSteHY8hUv+aD5daWj/5N/at1dIG9DbiQk/QEuC03o2fvtQRUCRv7Qj0Pqpf6tfgbwoZhNECaMKQ+sVSIk0CS7dvQ23/u34Vsj1ZR/Kl+045O/xO6QNiAAhQQqke2GaKjR1gDS/24GcDpAEIQBTuz0gtJ7Vh/yR3cZP8dn1yF+BlB8/swmdThj5I7uNnwCy65G/AlkgFwboCjQNNAE6/pRNC6Z2euqcttuETFcQ8kd2Gz/lx65H/sYrpF2w46vAnQJxhay8VWBSgQI5qWZ9xQoUyFjCOphUoEBOqllfsQIFMpawDiYVKJCTatZXrECBjCWsg0kFCuSkmvUVK1AgYwnrYFKBAjmpZn3FChTIWMI6mFSgQE6qWV+xAgUylrAOJhUokJNq1lesQIGMJayDSQX+AzMMbwXyi0XeAAAAAElFTkSuQmCC"
+  },
+  "buttons": [
+    {
+      "aboveText": "Загрузите в",
+      "text": "App Store",
+      "icon": "AppleIcon",
+      "version": "secondary"
+    },
+    {
+      "aboveText": "Доступно в",
+      "text": "Google Play",
+      "icon": "PlayMarketIcon",
+      "version": "secondary"
+    }
+  ],
+  "title": "Мобильное приложение",
+  "description": "Загрузить для IOS и Android"
+}

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

@@ -0,0 +1,31 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { MobileAppTileContent } from './MobileAppTileContent';
+import type { UniBlockProps } from '../../types';
+
+import { Logo } from '../../ui-kit/Logo/Logo';
+
+export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
+
+export const MobileAppTile = JSX<MobileAppTileProps>(
+  ({ className, title = 'Мобильное приложение', description, href = '#' }) => {
+    return (
+      <div
+        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${
+          className || ''
+        }`}
+      >
+        {href ? (
+          <div className="flex">
+            <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
+              <Logo className="w-[33px]" bgColor="transparent" hideTitle />
+            </div>
+            <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
+              <div className="text-sm font-medium">{title}</div>
+              <div className="text-xs text-secondary-text">{description}</div>
+            </a>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -0,0 +1,22 @@
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title QR код
+ */
+export interface QRCode {
+  /** @title QR код */
+  src?: string;
+  /** @title Ссылка */
+  href?: string;
+}
+
+/**
+ * @title Мобильное приложение
+ */
+export interface MobileAppTileContent
+  extends Pick<BaseTileCommonProps, 'title' | 'buttons' | 'description'> {
+  // TODO: description для мобильной версии
+  qr?: QRCode;
+  /** @title Ссылка */
+  href?: string; // TODO: для мобильной версии
+}

package/mobile/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/mobile/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/mobile/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/mobile/src/components/PictureText/PictureText.example.json

@@ -0,0 +1,20 @@
+{
+  "title": "Блок с картинкой",
+  "description": "Описание",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 300
+    }
+  },
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "DocumentTextIcon"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "DocumentTextIcon"
+    }
+  ]
+}