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

package/mobile/src/components/Footer/Footer.tsx

@@ -1,12 +1,66 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { FooterContent } from './FooterContent';
+import type { AccordionProps } from '../Accordion/Accordion';
+import { Accordion } from '../Accordion/Accordion';
+import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
+import { Contacts } from './Contacts';
+import type { FooterContent, SubMenuItem } from './FooterContent';
+import { HorizontalNavigation } from './HorizontalNavigation';
+import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { getAccordionItems } from '../../utils/getAccordionItems';
+
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
-export const Footer = JSX<FooterProps>(({ className, context }) => (
-  <footer className={`${className} px-9 py-2 bg-white rounded-bl-3xl rounded-br-3xl`}>
-    <TextInformation context={context} />
-  </footer>
-));
+export const Footer = JSX<FooterProps>(
+  ({
+    className = '',
+    documents,
+    relatedEnterprises,
+    contacts,
+    socialMedia,
+    topItems,
+    context,
+    horizontalNavigationTitle,
+    subMenu,
+  }) => {
+    const propsTextBlock: AccordionProps = {
+      context,
+      accordionItems: getAccordionItems(topItems),
+    };
+    return (
+      <footer className={`px-4 py-[26px] bg-white ${className}`}>
+        <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
+        <Accordion className="p-0 pt-0 pb-0 mb-4" {...propsTextBlock} />
+        <div>{subMenu?.map(renderSubMenuItem)}</div>
+        <MobileAppTile
+          context={context}
+          title="Мобильное приложение"
+          description="Загрузить для IOS и Android"
+        />
+        <SearchBar context={context} className="grow" />
+        <SocialMedia className="pb-4" media={socialMedia} context={context} />
+        <HorizontalNavigation
+          title={horizontalNavigationTitle}
+          links={relatedEnterprises}
+          context={context}
+        />
+        <TextInformation links={documents} context={context} />
+      </footer>
+    );
+  },
+);
+
+const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
+  const { icon, href, text } = menu;
+  return (
+    <Button key={`footer-${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/Footer/FooterContent.ts

@@ -1,5 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Тип контакта
@@ -26,6 +27,14 @@ export interface ContactInfo {
  */
 export type SocialMedia = Omit<LinkProps, 'text'>;
 
+/**
+ * @title Пункт подменю
+ */
+export interface SubMenuItem extends LinkProps {
+  /** @title Иконка подменю */
+  icon?: IconName;
+}
+
 /**
  * @title Подвал
  * @required ["topItems"]
@@ -39,4 +48,8 @@ export interface FooterContent extends SitemapProps {
   contacts?: ContactInfo[];
   /** @title Социальные сети */
   socialMedia?: SocialMedia[];
+  /** @title Заголовок для меню */
+  horizontalNavigationTitle?: string; // TODO: для мобильной версии
+  /** @title Подменю */
+  subMenu?: SubMenuItem[]; // TODO: для мобильной версии
 }

package/mobile/src/components/Footer/HorizontalNavigation.tsx

@@ -1,28 +1,36 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { LinkProps } from '../../model/LinkProps';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
 
-export const HorizontalNavigation = JSX<FooterLink>(({ className, links, context }) => {
-  const router = context.useRouter();
-  const { handlerDecorator } = context;
+export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
+  title?: string;
+}
+
+export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
+  ({ title, links, className = '', context }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
 
-  return (
-    <div className={`${className || ''}`}>
-      {links?.length ? (
-        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider">
-          {links.map((_, i) => (
-            <HorizontalNavigationLink
-              key={String(i)}
-              index={i}
-              {...useLink({ router, handlerDecorator }, _)}
-            />
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-});
+    return (
+      <div className={className}>
+        <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
+        {links?.length ? (
+          <div className="flex flex-col gap-5 py-5">
+            {links.map((_, i) => (
+              <HorizontalNavigationLink
+                key={String(i)}
+                index={i}
+                {...useLink({ router, handlerDecorator }, _)}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
 
 interface HorizontalNavigationLinkProps extends LinkProps {
   className: string;
@@ -31,11 +39,9 @@ interface HorizontalNavigationLinkProps extends LinkProps {
 }
 
 const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
-  ({ className, index, text, href, target, onClick }) => (
+  ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${
-        className || ''
-      }`}
+      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/mobile/src/components/Footer/MediaButton.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { IconName } from '../../ui-kit/Icon/IconProps';
+
+const ICONS_MAP: Array<{
+  origins: string[];
+  icon: IconName;
+  label: string;
+  width: string;
+  height: string;
+}> = [
+  {
+    origins: ['t.me', 'telegram.org'],
+    icon: 'TelegramIcon',
+    label: 'Телеграм',
+    width: '20px',
+    height: '16px',
+  },
+  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
+  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
+];
+
+interface MediaButtonProps {
+  href?: string;
+}
+
+export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
+  const { icon, width, height } =
+    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+
+  if (!icon) return null;
+
+  return (
+    <a
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
+    </a>
+  );
+});

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -2,27 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
-import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
-
-const ICONS_MAP: Array<{
-  origins: string[];
-  icon: IconName;
-  label: string;
-  width: string;
-  height: string;
-}> = [
-  {
-    origins: ['t.me', 'telegram.org'],
-    icon: 'TelegramIcon',
-    label: 'Телеграм',
-    width: '20px',
-    height: '16px',
-  },
-  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
-  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
-];
+import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps extends UniBlockProps {
   media?: Omit<LinkProps, 'text'>[];
@@ -32,32 +12,10 @@ export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context })
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
-    <div className={`flex items-end justify-end gap-2 pt-[30px] pb-7 ${className || ''}`}>
+    <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
       {media?.map((_, index) => (
         <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
       ))}
     </div>
   );
 });
-
-interface MediaButtonProps {
-  href?: string;
-}
-
-const MediaButton = JSX<MediaButtonProps>(({ href }) => {
-  const { icon, label, width, height } =
-    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-
-  if (!icon) return null;
-
-  return (
-    <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
-    </a>
-  );
-});

package/mobile/src/components/Footer/TextInformation.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import { FooterLink } from './FooterLink';
+import type { FooterLink } from './FooterLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
@@ -14,7 +14,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
         </span>
       </div>
       {links?.length ? (
-        <div className="flex justify-start items-start gap-5 pt-[5px]">
+        <div className={`flex flex-col justify-start items-start gap-5 pt-[5px]`}>
           {links.map((_, i) => (
             <TextInformationLink
               key={String(i)}

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

@@ -1,26 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-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 { TopItemProps } from '../../ui-kit/TopItem/TopItem';
+import { getAccordionItems } from '../../utils/getAccordionItems';
+import { Accordion } from '../Accordion/Accordion';
+import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
-import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
-
-const BORDER_COLORS: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-main-divider',
-  transparent: 'bg-main-divider opacity-30',
-};
+import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className, defaultLocation, bgColor = 'bg-white', context, topItems }) => {
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
     const { handlerDecorator } = context;
@@ -30,43 +26,48 @@ export const Header = JSX<HeaderProps>(
     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}
-        bgColor={bgColor}
-      />
-    ));
+    const [burgerMenuShow, setBurgerMenuShow] = context.useState(false);
 
-    const subMenu = subItems?.map((_) => (
-      <HeaderItem
-        key={_.href}
-        className="mr-8"
-        active={_ === activeSubItem}
-        {...useLink({ router, handlerDecorator }, _)}
-        bgColor={bgColor}
-      />
-    ));
+    const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
     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
+      <header className={`${bgColor} ${className}`}>
+        <div className="container px-4 py-0">
+          <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+          <nav className="flex items-center m-0 p-0 overflow-x-scroll overflow-y-hidden w-full h-[50px]">
+            <div className="flex">
+              {subItems?.map((_, i) =>
+                renderSubItem(
+                  {
+                    ...useLink({ router, handlerDecorator }, _),
+                    active: _ === activeSubItem,
+                    bgColor,
+                  },
+                  i,
+                ),
+              )}
+            </div>
+          </nav>
+        </div>
+        {burgerMenuShow ? (
+          <HeaderBurger
+            context={context}
+            onClick={toggleBurgerMenu}
+            burgerSubMenu={burgerSubMenu}
+            defaultLocation={defaultLocation}
+          >
+            <Accordion
               context={context}
-              className="ml-auto"
-              defaultLocation={defaultLocation}
-              bgColor={bgColor}
+              accordionItems={getAccordionItems(topItems)}
+              className="p-0 pt-0 pb-0 mb-4"
             />
-          </div>
-          <div className={`mt-5 h-[1px] ${BORDER_COLORS[bgColor]}`} />
-          <nav className="mt-5">{subMenu}</nav>
-        </div>
+          </HeaderBurger>
+        ) : null}
       </header>
     );
   },
 );
+
+const renderSubItem = (item: TopItemProps, i: number) => (
+  <HeaderItem key={String(i)} className="mr-8 whitespace-nowrap text-sm" {...item} />
+);

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

@@ -1,6 +1,14 @@
-import { BgColorVersion } from '../../model/BgColorVersion';
+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"]
@@ -17,4 +25,6 @@ export interface HeaderContent extends SitemapProps {
    * @default white
    */
   bgColor?: BgColorVersion;
+  /** @title Подменю */
+  burgerSubMenu?: SubMenuItem[]; // TODO: для мобильной версии
 }

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.tsx

@@ -1,30 +1,28 @@
 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';
-import { AlignType } from '../BaseTile/BaseTileProps';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
-const alignText: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColor = 'transparent', align = 'left', className, title, description }) => {
-    const textClasses = alignText[align];
+  ({ bgColor = 'transparent', className = '', title, description, image }) => {
     return (
-      <section className={`p-[50px] ${bgColor} ${className || ''} `}>
+      <section className={`px-4 py-6 ${bgColor} ${className}`}>
         {title && (
-          <Title size="L" className={`text-primary-text mt-0 font-medium ${textClasses}`}>
+          <Title size="L" className="text-primary-text mt-0 font-medium">
             {title}
           </Title>
         )}
         {description && (
-          <p className={`font-normal text-base mt-4 ${textClasses}`}>{description}</p>
+          <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

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

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

@@ -24,7 +24,7 @@ const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
-  ({ className, title, align, documents, icon, columnsMode = 'double' }) => {
+  ({ className = '', title, align, documents, icon, columnsMode = 'single' }) => {
     const containerClasses = linkColumnsModeStyleMap[columnsMode];
 
     return (

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

@@ -16,5 +16,7 @@
       "icon": "PlayMarketIcon",
       "version": "secondary"
     }
-  ]
+  ],
+  "title": "Мобильное приложение",
+  "description": "Загрузить для IOS и Android"
 }

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

@@ -1,32 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { MobileAppTileContent } from './MobileAppTileContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
 
+import { Logo } from '../../ui-kit/Logo/Logo';
+
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className, context, title = 'Мобильное приложение', qr, buttons = [] }) => {
+  ({ className, title = 'Мобильное приложение', description, href = '#' }) => {
     return (
-      <Tile className={className} context={context} title={title} buttons={buttons}>
-        <div className="flex items-center">
-          {qr?.src && qr?.href && (
-            <a href={qr.href} target="_blank">
-              <img
-                src={qr.src}
-                alt={title}
-                title={title}
-                width="164"
-                height="164"
-                className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
-              />
+      <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>
-          )}
-          <span className="font-normal text-sm text-secondary-text ml-4">
-            Наведите камеру телефона на QR-код и скачайте приложение
-          </span>
-        </div>
-      </Tile>
+          </div>
+        ) : null}
+      </div>
     );
   },
 );

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

@@ -13,6 +13,10 @@ export interface QRCode {
 /**
  * @title Мобильное приложение
  */
-export interface MobileAppTileContent extends Pick<BaseTileCommonProps, 'title' | 'buttons'> {
+export interface MobileAppTileContent
+  extends Pick<BaseTileCommonProps, 'title' | 'buttons' | 'description'> {
+  // TODO: description для мобильной версии
   qr?: QRCode;
+  /** @title Ссылка */
+  href?: string; // TODO: для мобильной версии
 }