@redneckz/wildless-cms-uni-blocks 0.10.7 → 0.10.8

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { getLinkTabClassName } from './tabItemClasses';
-import type { LinkTabData, TabData } from './TabsContent';
+import type { LinkTabData, TabData, TabsMode } from './TabsContent';
 
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
-  isScrollable?: boolean;
   onClick: (tab: TabData) => void;
+  tabsMode?: TabsMode;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, onClick, isScrollable = false } = props;
+  const { tab, currentTab, onClick, tabsMode } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
   const link = useLink();
@@ -25,12 +25,12 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   return (
     <a
       role="tab"
-      className={getLinkTabClassName('link', active, isScrollable)}
+      className={getLinkTabClassName('link', active, tabsMode)}
       target={tab.target}
       href={adjustedProps.href}
       onClick={handleClick}
     >
-      <span className={getLinkTabClassName('text', active, isScrollable)}>{tab.text}</span>
+      <span className={getLinkTabClassName('text', active, tabsMode)}>{tab.text}</span>
     </a>
   );
 });

package/mobile/src/components/Tabs/ScrollableTabs.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { RenderTabProps } from './renderTab';
-import type { TabData } from './TabsContent';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import type { RenderTabProps } from './renderTab';
 import { renderTab } from './renderTab';
+import type { TabData } from './TabsContent';
 
 interface ScrollableTabsProps extends RenderTabProps {
   tabs?: TabData[];
@@ -15,7 +15,7 @@ export type IsScrollButtonsShown = boolean[];
 const scrollButtonStyle = 'absolute z-40 top-0';
 
 export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
-  const { tabs, onClick, currentTab, page, showCounter } = props;
+  const { tabs, ...rest } = props;
 
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
     itemCount: tabs?.length || 0,
@@ -30,15 +30,7 @@ export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
           snapAlign="snap-start"
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
-          {tabs?.map(
-            renderTab({
-              onClick,
-              currentTab,
-              showCounter,
-              page,
-              isScrollable: true,
-            }),
-          )}
+          {tabs?.map(renderTab({ ...rest }))}
         </SwipeListContainer>
       </div>
       {scroll.canScrollLeft ? (

package/mobile/src/components/Tabs/Tabs.tsx

@@ -3,14 +3,20 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CenteredTabs } from './CenteredTabs';
 import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
 import type { TabData, TabsContent } from './TabsContent';
 
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
+interface RenderTabsProps extends TabsBlockProps {
+  currentTab?: TabData;
+  onClick: (tab: TabData) => void;
+}
+
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
+  const { className = '', tabs, isSticky, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -41,28 +47,24 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
       role="tablist"
       {...rest}
     >
-      {tabsMode === 'scrollable' ? (
-        <ScrollableTabs
-          tabs={tabs}
-          onClick={handleClick}
-          currentTab={currentTab}
-          showCounter={showCounter}
-          {...rest}
-        />
-      ) : (
-        tabs?.map(
-          renderTab({
-            onClick: handleClick,
-            currentTab,
-            showCounter,
-            ...rest,
-          }),
-        )
-      )}
+      {renderTabs({ tabs, onClick: handleClick, currentTab, ...rest })}
     </BlockWrapper>
   );
 });
 
+const renderTabs = ({ tabsMode, tabs, ...rest }: RenderTabsProps) => {
+  switch (tabsMode) {
+    case 'wideScreen':
+      return tabs?.map(renderTab({ tabsMode, ...rest }));
+    case 'centered':
+      return <CenteredTabs tabs={tabs} tabsMode={tabsMode} {...rest} />;
+    case 'scrollable':
+      return <ScrollableTabs tabs={tabs} tabsMode={tabsMode} {...rest} />;
+  }
+
+  return null;
+};
+
 const fireTabEvent = (tab: TabData) => {
   if (tab.type === 'group') {
     defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });

package/mobile/src/components/Tabs/TabsContent.ts

@@ -31,10 +31,11 @@ export type TabData = GroupTabData | LinkTabData;
 /**
  * @enumNames [
  *   "По ширине экрана",
- *   "С прокруткой"
+ *   "С прокруткой",
+ *   "По центру"
  * ]
  */
-export type TabsMode = 'wideScreen' | 'scrollable';
+export type TabsMode = 'wideScreen' | 'scrollable' | 'centered';
 
 /**
  * @title Вкладки

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,12 +1,12 @@
-import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
   ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
   INACTIVE_TEXT_CLASSES,
   TEXT_CLASSES,
   WHITE_ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
 } from './tabItemClasses';
+import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -15,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,7 +27,7 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, isScrollable)}
+        className={getGroupTabClassName('div', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
@@ -36,21 +36,22 @@ export const renderGroupTab =
           className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
             'text',
             active,
-            isScrollable,
+            tabsMode,
           )}`}
         >
-          {renderTitle(tab.title, active, isScrollable)}
+          {renderTitle(tab.title, active, tabsMode)}
           {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
   const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName = isScrollable
-    ? `${TEXT_CLASSES} ${activeClassName}`
-    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+  const titleClassName =
+    tabsMode === 'scrollable'
+      ? `${TEXT_CLASSES} ${activeClassName}`
+      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
 
   return title ? <h3 className={titleClassName}>{title}</h3> : null;
 };

package/mobile/src/components/Tabs/renderTab.tsx

@@ -2,18 +2,18 @@ import type { ContentPageDef } from '../../model/ContentPageDef';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { LinkTab } from './LinkTab';
 import { renderGroupTab } from './renderGroupTab';
-import type { TabData } from './TabsContent';
+import type { TabData, TabsMode } from './TabsContent';
 
 export interface RenderTabProps {
   page?: ContentPageDef;
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
-  isScrollable?: boolean;
+  tabsMode?: TabsMode;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, showCounter, ...rest }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -23,17 +23,9 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
+        return renderGroupTab({ page, showCounter, ...rest })(tab, i);
       case 'link': {
-        return (
-          <LinkTab
-            key={String(i)}
-            tab={tab}
-            currentTab={currentTab}
-            isScrollable={isScrollable}
-            onClick={onClick}
-          />
-        );
+        return <LinkTab key={String(i)} tab={tab} {...rest} />;
       }
       default:
         assertUnreachable(type);

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -1,3 +1,5 @@
+import type { TabsMode } from './TabsContent';
+
 export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
 export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
 export const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
@@ -17,7 +19,11 @@ const GROUP_TAB_CLASSES = {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+    },
+    wideScreen: {
       active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
       default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
     },
@@ -27,7 +33,11 @@ const GROUP_TAB_CLASSES = {
       active: `h-full border-0 border-b-2`,
       default: ``,
     },
-    default: {
+    centered: {
+      active: '',
+      default: '',
+    },
+    wideScreen: {
       active: '',
       default: '',
     },
@@ -39,7 +49,11 @@ const LINK_TAB_CLASSES = {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+    },
+    wideScreen: {
       active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
       default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
@@ -49,23 +63,27 @@ const LINK_TAB_CLASSES = {
       active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+    },
+    wideScreen: {
       active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
   },
 };
 
-export const getGroupTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
-  const styleType = isScrollable ? 'scrollable' : 'default';
+export const getGroupTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
   const styleActive = active ? 'active' : 'default';
+  const mode = tabsMode || 'wideScreen';
 
-  return GROUP_TAB_CLASSES[type][styleType][styleActive];
+  return GROUP_TAB_CLASSES[type][mode][styleActive];
 };
 
-export const getLinkTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
-  const styleType = isScrollable ? 'scrollable' : 'default';
+export const getLinkTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
   const styleActive = active ? 'active' : 'default';
+  const mode = tabsMode || 'wideScreen';
 
-  return LINK_TAB_CLASSES[type][styleType][styleActive];
+  return LINK_TAB_CLASSES[type][mode][styleActive];
 };

package/mobile/src/hooks/useLink.ts

@@ -23,7 +23,7 @@ export function useLink(params: UseLinkParams = {}) {
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
-    href: isRemote ? props.href : adjustHref(router)(props.href, basePath),
+    href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
     'aria-label': props.text,
     onClick: handlerDecorator(handleHref(props), props),
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Blocks.mobile.ts

@@ -1,5 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Carousel } from './Carousel/Carousel';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
@@ -37,4 +38,5 @@ export const Blocks: BlocksRegistry = {
   RichTextBlock,
   RollupItem,
   VerticalLayout,
+  CarouselRecommendationCard,
 };

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

@@ -0,0 +1,148 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard';
+import type {
+  CarouselRecommendationCardContent,
+  RecommendationSocialMedia,
+} from './CarouselRecommendationCardContent';
+
+const icon: Picture = {
+  src: 'product-basket.png',
+  format: 'webp',
+  size: {
+    width: 290,
+    height: 290,
+  },
+  title: 'product-basket',
+};
+
+const commonProps: RecommendationSocialMedia = {
+  target: '_blank',
+  version: 'gray',
+  rounded: false,
+};
+
+const socialMediaWithText: RecommendationSocialMedia[] = [
+  {
+    href: 'https://t.me',
+    text: 'Telegram',
+    ...commonProps,
+  },
+  {
+    href: 'https://vk.com',
+    text: 'Telegram',
+    ...commonProps,
+  },
+  {
+    href: 'https://ok.ru',
+    text: 'Telegram',
+    ...commonProps,
+  },
+];
+
+const socialMediaWithoutText: RecommendationSocialMedia[] = [
+  {
+    href: 'https://t.me',
+    ...commonProps,
+  },
+  {
+    href: 'https://vk.com',
+    ...commonProps,
+  },
+  {
+    href: 'https://ok.ru',
+    ...commonProps,
+  },
+];
+
+const items = [
+  'Бесплатное подключение и обслуживание',
+  'Вход и подписание документов по биометрии',
+  'Работа со счетами, шаблонами и выпиской',
+];
+
+export const CAROUSEL_RECOMMENDATION_CARD: CarouselRecommendationCardContent = {
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
+  items,
+  icon,
+  socialMedia: socialMediaWithText,
+};
+
+export const CAROUSEL_RECOMMENDATION_CARD_SIMPLE: CarouselRecommendationCardContent = {
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
+  items,
+  icon,
+  socialMedia: socialMediaWithoutText,
+};
+export const CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST: CarouselRecommendationCardContent = {
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
+  icon,
+  socialMedia: socialMediaWithoutText,
+};
+
+export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardContent = {
+  title: 'Россельхозбанк',
+  description: 'Описание',
+  align: 'text-left',
+  icon,
+  items: ['Свежие новости', 'Акции и предложенияа', 'Ставки и катировки'],
+  version: 'secondary',
+  socialMedia: socialMediaWithoutText,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard className="col-span-12" {...CAROUSEL_RECOMMENDATION_CARD} />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="secondary"
+        {...CAROUSEL_RECOMMENDATION_CARD}
+      />
+    </div>
+  ),
+  secondaryCenter: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="secondary"
+        align="text-center"
+        {...CAROUSEL_RECOMMENDATION_CARD_SECONDARY}
+      />
+    </div>
+  ),
+  gray: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD}
+      />
+    </div>
+  ),
+  socialMediaWithoutText: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD_SIMPLE}
+      />
+    </div>
+  ),
+  cardWithoutList: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST}
+      />
+    </div>
+  ),
+};

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.tsx

@@ -0,0 +1,63 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
+import { List } from '../../ui-kit/List/List';
+import { style } from '../../utils/style';
+import { SocialMedia } from '../Footer/SocialMedia';
+import { Headline } from '../Headline/Headline';
+import { BORDER_STYLE } from './cardStyle';
+import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+
+export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
+
+export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
+  ({
+    className = '',
+    description,
+    href,
+    icon,
+    items = [],
+    socialMedia = [],
+    target,
+    title,
+    align = 'text-left',
+    ...rest
+  }) => {
+    return (
+      <BlockWrapper
+        className={style(
+          'relative box-border p-default group-data-gray:bg-main-divider/50',
+          BORDER_STYLE,
+          className,
+        )}
+        {...rest}
+      >
+        <LinkWrapper href={href} target={target}>
+          <Headline
+            className="mb-2"
+            title={title}
+            description={description}
+            headlineVersion="S"
+            isPadding={false}
+            align={align}
+          />
+          {items.length ? (
+            <List className="flex flex-col gap-2" items={items} listItemSize="S" />
+          ) : null}
+          {renderIcon(icon)}
+          {socialMedia.length ? <SocialMedia className="mt-5" media={socialMedia} /> : null}
+        </LinkWrapper>
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderIcon = (icon?: Picture) =>
+  icon?.src || icon?.icon ? (
+    <div>
+      <Img image={icon} />
+    </div>
+  ) : null;

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -8,11 +8,9 @@ import { List } from '../../ui-kit/List/List';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
+import { BORDER_STYLE } from './cardStyle';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
-const BORDER_STYLE =
-  'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
-
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(

package/src/components/CarouselRecommendationCard/cardStyle.ts

@@ -0,0 +1,2 @@
+export const BORDER_STYLE =
+  'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';

package/src/components/CarouselTariffsCard/getPaddingStyle.mobile.tsx

@@ -1,2 +1,2 @@
-export const getPaddingStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'p-default mt-6' : 'p-default mt-6';
+export const getPaddingStyle = (isHighlighting = false): string =>
+  isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный

package/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -1,2 +1,2 @@
-export const getPaddingStyle = (isHighlighting?: boolean) =>
+export const getPaddingStyle = (isHighlighting = false): string =>
   isHighlighting ? 'p-8 mt-8 pt-20' : 'p-8 mt-20';

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

@@ -43,7 +43,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
         {...rest}
       />
       <SearchBar className="grow" />
-      <SocialMedia className="pb-4" media={socialMedia} />
+      <SocialMedia className="pt-6 pb-6" media={socialMedia} />
       <HorizontalNavigation title={horizontalNavigationTitle} links={relatedEnterprises} />
       <TextInformation links={documents} />
     </BlockWrapper>

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

@@ -8,7 +8,7 @@ export interface SocialMediaProps {
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media }) => (
-  <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className}`}>
+  <div className={`flex gap-2 items-start justify-start ${className}`}>
     {media?.map((_, index) => (
       <MediaButton key={String(index)} {..._} />
     ))}

package/src/components/Tabs/CenteredTabs.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RenderTabProps } from './renderTab';
+import { renderTab } from './renderTab';
+import type { TabData } from './TabsContent';
+
+interface CenteredTabsProps extends RenderTabProps {
+  tabs?: TabData[];
+}
+
+export const CenteredTabs = JSX<CenteredTabsProps>(({ tabs, ...rest }) => (
+  <div className="flex p-1 m-auto bg-main-gray rounded-md">{tabs?.map(renderTab({ ...rest }))}</div>
+));