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

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
-import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
@@ -31,7 +31,7 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 });
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
-  const code = exchangeCurrencyItem?.currency?.currency;
+  const code = exchangeCurrencyItem?.code;
   return (
     <tr key={code} className="pb-1">
       <td className="pt-4">
@@ -41,10 +41,10 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
         </div>
       </td>
       <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.buyExchangeRate)}
+        {formatCurrency(exchangeCurrencyItem.buy)}
       </td>
       <td className="pt-4 pl-11 m-title-md font-light">
-        {formatCurrency(exchangeCurrencyItem.saleExchangeRate)}
+        {formatCurrency(exchangeCurrencyItem.sell)}
       </td>
     </tr>
   );

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,47 +1,132 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
-import { Input } from '../../ui-kit/Input/Input';
-import { Select } from '../../ui-kit/Select/Select';
-import { SelectOption } from '../../ui-kit/Select/SelectOption';
-import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
-
-export interface ExchangeCurrencyCalculatorProps {
-  exchangeCurrencyItems: ExchangeCurrencyItem[];
-  codes: string[];
+import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import { calculateResult, formatValue } from './calculateResult';
+import { callbackCurrencySelect } from './callbackCurrencySelect';
+import { Currency } from './CurrencyProps';
+import { renderButton } from './renderButton';
+import { renderInput } from './renderInput';
+
+export interface ExchangeCurrencyItem {
+  code?: Currency;
+  buy?: number;
+  sell?: number;
+}
+export interface ExchangeCurrencyCalculatorProps extends UniBlockProps {
   className?: string;
+  currencyRatesBuy: ExchangeCurrencyItem[];
+  currencyRatesSell: ExchangeCurrencyItem[];
+}
+export interface CalcState {
+  inputSell: string;
+  inputBuy: string;
+  selectSell: Currency;
+  selectBuy: Currency;
 }
 
 export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
-  ({ codes, className = '' }) => {
+  ({ context, className = '', currencyRatesBuy, currencyRatesSell }) => {
+    const [calcState, setCalcState] = context.useState<CalcState>({
+      inputSell: '',
+      inputBuy: '',
+      selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,
+      selectBuy: currencyRatesSell?.[0]?.code || Currency.USD,
+    });
+
+    const handleSetCalcState = (newState: Partial<CalcState>) => {
+      setCalcState((oldState) => ({ ...oldState, ...newState }));
+    };
+
     return (
       <div className={`grid gap-3.5 ${className}`}>
-        {renderInput('Хочу продать', codes)}
-        {renderInput('Получу', codes, 'USD')}
-        <Button className="box-border mt-3.5 py-3 h-12 w-full" version="primary" href="#">
-          Купить валюту
-        </Button>
+        {renderInput({
+          placeholder: 'Хочу продать',
+          rates: currencyRatesBuy,
+          selected: calcState.selectSell,
+          setSelected: handleSelectSell(calcState, handleSetCalcState, currencyRatesSell),
+          value: calcState.inputSell,
+          setValue: (value) =>
+            handleInputSell(handleSetCalcState, currencyRatesSell)(
+              value,
+              calcState.selectSell,
+              calcState.selectBuy,
+            ),
+        })}
+        {renderInput({
+          placeholder: 'Получу',
+          rates: currencyRatesSell,
+          selected: calcState.selectBuy,
+          setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
+          value: calcState.inputBuy,
+          setValue: (value) =>
+            handleInputBuy(handleSetCalcState, currencyRatesBuy)(
+              value,
+              calcState.selectBuy,
+              calcState.selectSell,
+            ),
+        })}
+        {renderButton()}
       </div>
     );
   },
 );
 
-function renderInput(placeholder: string, codes: string[], selected?: string) {
-  return (
-    <div className="relative flex items-center">
-      <Input
-        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
-        type="number"
-        placeholder={`${placeholder}`}
-      />
-      {codes.length ? (
-        <Select className="h-9 -translate-x-4">
-          {codes.map((code, i) => (
-            <SelectOption key={String(i)} value={code} selected={code === selected}>
-              {code}
-            </SelectOption>
-          ))}
-        </Select>
-      ) : null}
-    </div>
-  );
-}
+const handleSelectSell =
+  (
+    calcState: CalcState,
+    setCalcState: FuncReturnVoid<Partial<CalcState>>,
+    currencyRatesSell: ExchangeCurrencyItem[],
+  ) =>
+  (value: Currency) => {
+    setCalcState({ selectSell: value });
+    callbackCurrencySelect({
+      value,
+      oppositeValue: calcState.selectBuy,
+      handleConvert: (codeFrom = calcState.selectSell, codeTo = calcState.selectBuy) => {
+        handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, codeFrom, codeTo);
+      },
+    });
+  };
+
+const handleSelectBuy =
+  (
+    calcState: CalcState,
+    setCalcState: FuncReturnVoid<Partial<CalcState>>,
+    currencyRatesBuy: ExchangeCurrencyItem[],
+  ) =>
+  (value: Currency) => {
+    setCalcState({ selectBuy: value });
+    callbackCurrencySelect({
+      value,
+      oppositeValue: calcState.selectSell,
+      handleConvert: (codeTo = calcState.selectBuy, codeFrom = calcState.selectSell) =>
+        handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, codeTo, codeFrom),
+    });
+  };
+
+const handleInputSell =
+  (setCalcState: FuncReturnVoid<Partial<CalcState>>, currencyRatesSell: ExchangeCurrencyItem[]) =>
+  (value: string, codeFrom: Currency, codeTo: Currency) => {
+    setCalcState({ inputSell: formatValue(value), selectBuy: codeTo });
+    const rate =
+      currencyRatesSell.find((_) => _.code === codeTo)?.buy ||
+      currencyRatesSell.find((_) => _.code === codeFrom)?.sell;
+    if (rate) {
+      setCalcState({
+        inputBuy: String(calculateResult(value, rate, codeFrom === Currency.RUB) || ''),
+      });
+    }
+  };
+
+const handleInputBuy =
+  (setCalcState: FuncReturnVoid<Partial<CalcState>>, currencyRatesBuy: ExchangeCurrencyItem[]) =>
+  (value: string, codeTo: Currency, codeFrom: Currency) => {
+    setCalcState({ inputBuy: formatValue(value), selectSell: codeFrom });
+    const rate =
+      currencyRatesBuy.find((_) => _.code === codeFrom)?.sell ||
+      currencyRatesBuy.find((_) => _.code === codeTo)?.buy;
+    if (rate) {
+      setCalcState({
+        inputSell: String(calculateResult(value, rate, codeTo === Currency.RUB) || ''),
+      });
+    }
+  };

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -4,26 +4,12 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { Currency } from './CurrencyProps';
 import { CurrencyTable } from './CurrencyTable';
 import { CurrentLocation } from './CurrentLocation';
 import { ExchangeCurrencyCalculator } from './ExchangeCurrencyCalculator';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
 
-const CURRENCY_CODES = ['USD', 'EUR'];
-const EXCHANGE_CODES = ['RUB', 'USD', 'EUR'];
-const DEFAULT_CURRENCY_ITEMS = [
-  {
-    buyExchangeRate: 90.6,
-    saleExchangeRate: 92.8,
-    currency: { id: 2, code: '978', currency: 'EUR', name: 'Евро' },
-  },
-  {
-    buyExchangeRate: 73.75,
-    saleExchangeRate: 75.95,
-    currency: { id: 1, code: '840', currency: 'USD', name: 'Американский доллар' },
-  },
-];
-
 const DEFAULT_LOCATION = {
   address: 'Москва, ул.Ленина д.28',
   distance: '6км',
@@ -33,11 +19,13 @@ export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlock
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
-    const data = useExchangeRates(context.useAsyncData);
-    const exchangeCurrencyItems =
-      data?.exchangeRate?.currencies?.filter((item) => {
-        return CURRENCY_CODES.indexOf(item?.currency?.currency || '') !== -1;
-      }) || DEFAULT_CURRENCY_ITEMS;
+    const currencyRates = useExchangeRates(context.useAsyncData);
+
+    const currencyRatesBuy = currencyRates.filter((_) => _.buy);
+    currencyRatesBuy.unshift({ code: Currency.RUB });
+
+    const currencyRatesSell = currencyRates.filter((_) => _.sell);
+    currencyRatesSell.push({ code: Currency.RUB });
 
     return (
       <section
@@ -56,19 +44,17 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
         >
           <div className="flex">
             <div className="mr-[43px] pt-4">
-              {exchangeCurrencyItems ? (
-                <CurrencyTable
-                  className="mb-[31px]"
-                  exchangeCurrencyItems={exchangeCurrencyItems}
-                />
+              {currencyRates ? (
+                <CurrencyTable className="mb-[31px]" exchangeCurrencyItems={currencyRates} />
               ) : null}
               <CurrentLocation {...DEFAULT_LOCATION} />
             </div>
-            {exchangeCurrencyItems?.length ? (
+            {currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (
               <ExchangeCurrencyCalculator
                 className="grow"
-                exchangeCurrencyItems={exchangeCurrencyItems}
-                codes={EXCHANGE_CODES}
+                context={context}
+                currencyRatesBuy={currencyRatesBuy}
+                currencyRatesSell={currencyRatesSell}
               />
             ) : null}
           </div>

package/mobile/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -4,14 +4,3 @@ import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
  * @title Курсы валют
  */
 export type ExchangeRateTileContent = HeadingContent;
-
-export interface ExchangeCurrencyItem {
-  buyExchangeRate?: number;
-  saleExchangeRate?: number;
-  currency?: {
-    id?: number;
-    code?: string;
-    currency?: string;
-    name?: string;
-  };
-}

package/mobile/src/components/ExchangeRateTile/calculateResult.ts

@@ -0,0 +1,8 @@
+import { roundTo } from '../../utils/roundTo';
+
+export const calculateResult = (value: string, rate: number, precision: boolean) => {
+  const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+  return Number.isInteger(result) ? result : roundTo(result);
+};
+
+export const formatValue = (value: string) => value.replace(/[^\d.,]/g, '').replace(',', '.');

package/mobile/src/components/ExchangeRateTile/callbackCurrencySelect.ts

@@ -0,0 +1,21 @@
+import { tableFunc } from '../../utils/tableFunc';
+import { Currency } from './CurrencyProps';
+
+interface TableFuncProps {
+  value: Currency;
+  oppositeValue: Currency;
+  handleConvert: (codeFrom?: Currency, codeTo?: Currency) => void;
+}
+
+export const callbackCurrencySelect = (props: TableFuncProps) =>
+  tableFunc<TableFuncProps, () => void>([
+    [
+      (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
+      () => props.handleConvert(props.value, Currency.RUB),
+    ],
+    [
+      (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
+      () => props.handleConvert(props.value, Currency.USD),
+    ],
+    [() => true, () => props.handleConvert(props.value)],
+  ])(props)?.();

package/mobile/src/components/ExchangeRateTile/formatCurrency.ts

@@ -1,3 +1,8 @@
-const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
+import { Currency } from './CurrencyProps';
+
+const currencyNumberFormat = new Intl.NumberFormat('ru', {
+  style: 'currency',
+  currency: Currency.RUB,
+});
 
 export const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');

package/mobile/src/components/ExchangeRateTile/renderButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from '../../ui-kit/Button/Button';
+
+export function renderButton() {
+  return (
+    <Button
+      className="box-border mt-3.5 py-3 h-12 w-full"
+      version="primary"
+      href="https://coins.rshb.ru/exchange"
+      target="_blank"
+    >
+      Купить валюту
+    </Button>
+  );
+}

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -0,0 +1,43 @@
+import { Input } from '../../ui-kit/Input/Input';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import type { Currency } from './CurrencyProps';
+import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
+
+interface InputProps {
+  placeholder: string;
+  rates: ExchangeCurrencyItem[];
+  selected: string;
+  setSelected: (value: Currency) => void;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+export function renderInput(props: InputProps) {
+  const { placeholder, rates, selected, value, setValue, setSelected } = props;
+
+  return (
+    <div className="relative flex items-center">
+      <Input
+        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
+        placeholder={placeholder}
+        type="text"
+        value={value}
+        onChange={setValue}
+      />
+      {rates.length ? (
+        <Select
+          className="h-9 -translate-x-4"
+          value={selected}
+          onChange={(_) => setSelected(_ as Currency)}
+        >
+          {rates.map((_, i) => (
+            <SelectOption key={String(i)} value={_.code}>
+              {_.code}
+            </SelectOption>
+          ))}
+        </Select>
+      ) : null}
+    </div>
+  );
+}

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

@@ -7,43 +7,31 @@ const ICONS_MAP: Array<{
   origins: string[];
   icon: Picture;
   label: string;
-  width: string;
-  height: string;
 }> = [
   {
     origins: ['t.me', 'telegram.org'],
     icon: { icon: 'TelegramIcon' },
     label: 'Телеграм',
-    width: '20px',
-    height: '16px',
   },
   {
     origins: ['vk.com'],
     icon: { icon: 'VKIcon' },
     label: 'ВКонтакте',
-    width: '24px',
-    height: '12px',
   },
   {
     origins: ['ok.ru'],
     icon: { icon: 'OkIcon' },
     label: 'Одноклассники',
-    width: '12px',
-    height: '20px',
   },
   {
     origins: ['apps.apple.com'],
     icon: { icon: 'AppleIcon' },
     label: 'App Store',
-    width: '20px',
-    height: '22px',
   },
   {
     origins: ['play.google.com'],
     icon: { icon: 'PlayMarketIcon' },
     label: 'Google Play',
-    width: '21px',
-    height: '21px',
   },
 ];
 
@@ -53,10 +41,12 @@ interface MediaButtonProps {
 }
 
 export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' }) => {
-  const { icon, width, height, label } =
+  const { icon, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
-  if (!icon) return null;
+  if (!icon) {
+    return null;
+  }
 
   const classes =
     version === 'secondary'
@@ -77,10 +67,10 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
     >
       {icon ? (
         <Img
-          image={{ ...icon, iconVersion: 'normal' }}
+          image={icon}
           imageClassName={isPrimary ? 'group-hover:text-white' : ''}
-          width={width}
-          height={height}
+          width="24"
+          height="24"
           asSVG
         />
       ) : null}

package/mobile/src/components/Gallery/Gallery.tsx

@@ -64,7 +64,7 @@ function renderCard(card: GalleryCard, key: number) {
         ) : null}
         {card.title ? <h3 className={`font-medium text-m-title-xs m-0`}>{card.title}</h3> : null}
         {card.description ? renderDescription(card) : null}
-        {card.items?.length ? renderItems(card.items, card.version, card.isDotted) : null}
+        {card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null}
       </div>
       {card?.button?.text ? renderButton(card.button) : null}
     </div>
@@ -93,7 +93,7 @@ function renderDescription(card: GalleryCard) {
   );
 }
 
-function renderItems(items: GalleryItem[], version: BlockVersion = 'primary', isDotted) {
+function renderItems(items: GalleryItem[], isDotted, version: BlockVersion = 'primary') {
   return (
     <section className="mt-3">
       {items.map((item, i) => (

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -20,7 +20,7 @@ export const GalleryCardInner = JSX<GalleryCard>(
           {description ? (
             <div className={`font-light text-m-md-new ${title ? 'mt-2' : ''}`}>{description}</div>
           ) : null}
-          {items?.length ? renderItems(items, version, isDotted) : null}
+          {items?.length ? renderItems(items, isDotted, version) : null}
         </div>
         {button?.text ? renderButton(button) : null}
       </div>
@@ -42,7 +42,7 @@ function renderCardTitle(title: string, className: string) {
   return <div className={`text-xl m-0 ${className}`}>{title}</div>;
 }
 
-function renderItems(items: GalleryItem[], version: BlockVersion = 'primary', isDotted: boolean) {
+function renderItems(items: GalleryItem[], isDotted: boolean, version: BlockVersion = 'primary') {
   return (
     <List
       className={`max-w-[308px] mt-2 text-sm ${

package/mobile/src/components/Gallery/GalleryInner.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import type { GalleryContent } from './GalleryContent';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
-import type { GalleryContent } from './GalleryContent';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
   version?: GalleryVersion;
@@ -37,24 +37,14 @@ export const GalleryInner = JSX<GalleryInnerProps>(
           activeCardIndex={activeCardIndex}
           {...rest}
         />
-        {showPrevButton ? (
-          <ArrowButton
-            className="absolute top-1/2 left-8 z-10 mt-[25px]"
-            onClick={handlePrevClick}
-            ariaLabel="Пролистать влево"
-            data-block-control="scroll-left"
-          />
-        ) : null}
-        {showNextButton ? (
-          <ArrowButton
-            className="absolute top-1/2 right-8 z-10 mt-[25px] rotate-180"
-            onClick={handleNextClick}
-            ariaLabel="Пролистать вправо"
-            data-block-control="scroll-right"
-          />
-        ) : null}
-        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" />
-        <div className="absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" />
+        {renderArrows({
+          handler: [handlePrevClick, handleNextClick],
+          isShown: [showPrevButton, showNextButton],
+          btnClass: ['left-8', 'right-8'],
+          className: 'top-1/2',
+        })}
+        <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
+        <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
       </section>
     );
   },

package/mobile/src/components/GroupBlock/BlocksTypeProps.ts

@@ -10,7 +10,10 @@ export interface ActiveHandler {
 }
 
 export interface GroupBlockCommonProps {
-  /** @title Стиль */
+  /**
+   * @title Стиль
+   * @default ["col-span-12"]
+   */
   style?: string[];
   /** @title Теги */
   tags?: string[];

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

@@ -1,27 +1,28 @@
 {
   "tabs": [
-    { "title": "Еще программы", "index": 0 },
-    { "title": "Страхование жизни", "index": 1, "tag": "tag1" },
-    { "title": "Страхование здоровья", "index": 2, "tag": "tag2" }
+    { "title": "Таб 1", "index": 0 },
+    { "title": "Таб 2", "index": 1, "tag": "tag1" },
+    { "title": "Таб 3", "index": 2, "tag": "tag2" }
   ],
+  "isShowCounter": true,
   "blocks": [
     {
       "blockType": "ProductBlock",
       "title": "Продуктовый блок",
       "description": "Описание текстового блока",
-      "tags":["tag2"]
+      "tags": ["tag2"]
     },
     {
       "blockType": "ProductTile",
       "title": "Продуктовая плитка",
       "description": "Описание текстового блока",
-      "tags":["tag1"]
+      "tags": ["tag1"]
     },
     {
       "blockType": "ProductBlock",
       "title": "Продуктовый блок",
       "description": "Описание текстового блока",
-      "tags":["tag2"]
+      "tags": ["tag2"]
     }
   ]
-}
+}

package/mobile/src/components/GroupBlock/GroupBlock.tsx

@@ -14,23 +14,28 @@ export interface GroupBlockProps extends GroupBlockContent, UniBlockProps {
 }
 
 export const GroupBlock = JSX<GroupBlockProps>(
-  ({ className = '', tabs, context, anchor = null, groupBlocks = [] }) => {
+  ({ className = '', tabs, context, anchor = null, groupBlocks = [], isShowCounter }) => {
     const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
 
     const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
 
     const tabsNewMap = tabs?.map((tab) => {
       const count = tab.tag
-        ? groupBlocks.filter((block) => block?.tags?.includes(`${tab.tag}`)).length
+        ? groupBlocks.filter((block) => block?.tags?.includes(tab.tag as string)).length
         : groupBlocks.length;
 
       return { ...tab, count };
     });
 
     return (
-      <section id={anchor} className={`box-border gap-1 h-12 ${className}`}>
+      <section id={anchor} className={`box-border gap-1 ${className}`}>
         {tabsNewMap?.length ? (
-          <GroupBlockTabs currentTag={currentTag} onTabClick={setCurrentTag} tabs={tabsNewMap} />
+          <GroupBlockTabs
+            currentTag={currentTag}
+            onTabClick={setCurrentTag}
+            tabs={tabsNewMap}
+            isShowCounter={isShowCounter}
+          />
         ) : null}
         {groupBlocks.length ? (
           <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />

package/mobile/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -12,7 +12,7 @@ export interface GroupBlockTabsProps {
 }
 
 export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
-  const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
+  const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
 
   return (
     <div className={`mb-2 box-border flex gap-x-1 ${className}`} role="tablist">
@@ -24,7 +24,7 @@ export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
 const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
 
 const renderTab =
-  (onTabClick: TabClickHandler, isShowCounter: boolean, currentTag?: string) =>
+  (onTabClick: TabClickHandler, isShowCounter?: boolean, currentTag?: string) =>
   (tab: TabsItemProps, i: number) => {
     const isActive = currentTag === tab.tag;
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
@@ -42,9 +42,9 @@ const renderTab =
         tag={tab?.tag}
       >
         <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? <h3 className={`mr-8 ${tabText}`}>{tab?.title}</h3> : null}
+          {tab?.title ? <h3 className={tabText}>{tab?.title}</h3> : null}
           {isShowCounter ? (
-            <div className={`flex items-center justify-center ${counterBlockStyle}`}>
+            <div className={`flex items-center justify-center ml-8 ${counterBlockStyle}`}>
               <span>{tab.count}</span>
             </div>
           ) : null}