@redneckz/wildless-cms-uni-blocks 0.6.15 → 0.6.17

package/mobile/src/ui-kit/YandexMap/renderUserGeolocation.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { Icon } from '../Icon/Icon';
+import ymaps from 'yandex-maps';
+
+const styles = {
+  focus: 'focus:border-primary-focus focus:border',
+  hover: 'hover:bg-primary-hover',
+  active: 'active:bg-primary-active',
+  border: 'border border-transparent rounded-md',
+  position: 'absolute flex items-center justify-center',
+  font: 'text-center font-sans',
+};
+
+export const renderUserGeolocation = (
+  map: ymaps.Map,
+  yandexMaps: typeof ymaps,
+  className: string,
+) => {
+  const setUserGeoLocation = () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    yandexMaps.geolocation
+      .get({
+        provider: 'yandex',
+        autoReverseGeocode: true,
+        mapStateAutoApply: true,
+      })
+      .then(function (result) {
+        map.geoObjects.add(result.geoObjects);
+      });
+  };
+
+  return (
+    <div
+      className={`select-none cursor-pointer py-4 w-12 bg-white ${Object.values(styles).join(
+        ' ',
+      )} ${className}`}
+      onClick={setUserGeoLocation}
+    >
+      <Icon name="UserGeoLocationIcon" width="20" height="16" />
+    </div>
+  );
+};

package/mobile/src/ui-kit/YandexMap/useYandexMaps.ts

@@ -0,0 +1,11 @@
+import ymaps from 'yandex-maps';
+import { useExternalNS } from '../../hooks/useExternalNS';
+import { projectSettings } from '../../ProjectSettings';
+
+const YMAPS_NAMESPACE = 'ymaps';
+
+export const useYandexMaps = () => {
+  const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`;
+
+  return useExternalNS<typeof ymaps>(YMAPS_NAMESPACE, url);
+};

package/package.json

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

package/src/common.css

@@ -157,3 +157,12 @@ html {
     -moz-appearance: textfield;
   }
 }
+
+/*
+  Styling Yandex Map element
+ */
+/* Hide yandex elements in yandex map */
+[class$='-map-copyrights-promo'],
+[class$='-copyrights-pane'] {
+  display: none;
+}

package/src/components/Bonus/Bonus.example.json

@@ -4,12 +4,7 @@
   "bonusItems": [
     {
       "title": "Плитка 1",
-      "description": "Описание плитки 1",
-      "bonusItemContent": {
-        "bonusType": "count",
-        "bonusCount": "1",
-        "bonusName": "балл"
-      }
+      "description": "Описание плитки 1"
     }
   ]
 }

package/src/components/Bonus/BonusContent.ts

@@ -37,6 +37,7 @@ export type BonusItem = HeadlineCommonProps & {
   /**
    * @title Кнопка
    * @maxItems 1
+   * @default [{"version" : "secondary", "target": "_self"}]
    */
   buttons?: ButtonWithIconProps[];
 };

package/src/components/Catalog/Catalog.fixture.tsx

@@ -1,9 +1,7 @@
-import type { IconVersion } from '../../model/IconVersion';
 import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { Catalog, CatalogProps } from './Catalog';
 
 const payRing: Picture = {
@@ -23,14 +21,9 @@ const buttonPrimary: ButtonWithIconProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'primary',
-  appendLeft: (
-    <Img
-      image={{ icon: 'AppleIcon', iconVersion: 'primary' as IconVersion }}
-      width="24"
-      height="24"
-      asSVG
-    />
-  ),
+  icon: {
+    icon: 'AppleIcon',
+  },
 };
 
 const catalogCard = {

package/src/components/Catalog/CatalogCard.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { Button } from '../../ui-kit/Button/Button';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CatalogCardType } from './CatalogContent';
@@ -35,7 +35,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
           </div>
         ) : null}
         {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-        {button ? <Button className="mt-5 w-full" {...button} /> : null}
+        {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
       </section>
     );
   },

package/src/components/ContentPage/renderContentPageHead.tsx

@@ -5,15 +5,19 @@ export function renderContentPageHead(data: ContentPageMeta) {
   const { description, keywords, canonical, robots } = main || {};
 
   return [
-    <title>{title}</title>,
-    <meta name="viewport" content="width=device-width, initial-scale=1" />,
-    description ? <meta name="description" content={description} /> : null,
-    keywords ? <meta name="keywords" content={keywords.join(',')} /> : null,
-    robots ? <meta name="robots" content={robots.join(',')} /> : null,
+    <title key="title">{title}</title>,
+    <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1" />,
+    description ? <meta key="description" name="description" content={description} /> : null,
+    keywords ? <meta key="keywords" name="keywords" content={keywords.join(',')} /> : null,
+    robots ? <meta key="robots" name="robots" content={robots.join(',')} /> : null,
     renderOpenGraph(og),
     renderTwitter(twitter),
-    canonical ? <link rel="canonical" href={canonical} /> : null,
-    jsonLd ? <script type="application/ld+json">{jsonLd}</script> : null,
+    canonical ? <link key="canonical" rel="canonical" href={canonical} /> : null,
+    jsonLd ? (
+      <script key="jsonLd" type="application/ld+json">
+        {jsonLd}
+      </script>
+    ) : null,
   ].filter(Boolean);
 }
 

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -31,18 +31,20 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 });
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
-  const code = exchangeCurrencyItem?.code;
+  const currency = exchangeCurrencyItem?.currency?.currency;
 
   return (
-    <tr key={code} className="pb-1 text-h6">
+    <tr key={currency} className="pb-1 text-h6">
       <td className="pt-4">
         <div className="flex items-center">
-          {code ? <Img image={{ icon: CURRENCY_ICONS_MAP[code] }} width="24" height="24" /> : null}
-          <span className="ml-2">{code}</span>
+          {currency ? (
+            <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
+          ) : null}
+          <span className="ml-2">{currency}</span>
         </div>
       </td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.sell)}</td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buy)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</td>
     </tr>
   );
 };

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -4,21 +4,14 @@ import { Img } from '../../ui-kit/Img/Img';
 interface CurrentLocationProps {
   className?: string;
   address?: string;
-  distance?: string;
 }
 
-export const CurrentLocation = JSX<CurrentLocationProps>(
-  ({ className = '', address, distance }) => (
-    <div className={`flex ${className}`}>
-      <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
-      <div className="ml-3">
-        {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
-        {distance ? (
-          <p className="text-secondary-text m-0 text-m-light">
-            Курс указан для ближайшего офиса - {distance}
-          </p>
-        ) : null}
-      </div>
+export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
+  <div className={`flex ${className}`}>
+    <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
+    <div className="ml-3">
+      {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
+      <p className="text-secondary-text m-0 text-m">Курс указан для ближайшего офиса</p>
     </div>
-  ),
-);
+  </div>
+));

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -10,9 +10,13 @@ import { Currency } from './CurrencyProps';
 import { renderInput } from './renderInput';
 
 export interface ExchangeCurrencyItem {
-  code?: Currency;
-  buy?: number;
-  sell?: number;
+  currency?: {
+    id?: number;
+    code?: string;
+    currency?: Currency;
+  };
+  buyExchangeRate?: number;
+  saleExchangeRate?: number;
 }
 export interface ExchangeCurrencyCalculatorProps extends UniBlockProps {
   className?: string;
@@ -35,8 +39,8 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     const [calcState, setCalcState] = useState<CalcState>({
       inputSell: '',
       inputBuy: '',
-      selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,
-      selectBuy: currencyRatesSell?.[0]?.code || Currency.USD,
+      selectSell: currencyRatesBuy?.[0]?.currency?.currency || Currency.RUB,
+      selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
     });
 
     const handleSetCalcState = (newState: Partial<CalcState>) => {
@@ -96,8 +100,12 @@ const handleSelectSell =
     callbackCurrencySelect({
       value,
       oppositeValue: calcState.selectBuy,
-      handleConvert: (codeFrom = calcState.selectSell, codeTo = calcState.selectBuy) => {
-        handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, codeFrom, codeTo);
+      handleConvert: (currencyFrom = calcState.selectSell, currencyTo = calcState.selectBuy) => {
+        handleInputSell(setCalcState, currencyRatesSell)(
+          calcState.inputSell,
+          currencyFrom,
+          currencyTo,
+        );
       },
     });
   };
@@ -113,35 +121,39 @@ const handleSelectBuy =
     callbackCurrencySelect({
       value,
       oppositeValue: calcState.selectSell,
-      handleConvert: (codeTo = calcState.selectBuy, codeFrom = calcState.selectSell) =>
-        handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, codeTo, codeFrom),
+      handleConvert: (currencyTo = calcState.selectBuy, currencyFrom = calcState.selectSell) =>
+        handleInputBuy(setCalcState, currencyRatesBuy)(
+          calcState.inputBuy,
+          currencyTo,
+          currencyFrom,
+        ),
     });
   };
 
 const handleInputSell =
   (setCalcState: (state: Partial<CalcState>) => void, currencyRatesSell: ExchangeCurrencyItem[]) =>
-  (value: string, codeFrom: Currency, codeTo: Currency) => {
-    setCalcState({ inputSell: formatValue(value), selectBuy: codeTo });
+  (value: string, currencyFrom: Currency, currencyTo: Currency) => {
+    setCalcState({ inputSell: formatValue(value), selectBuy: currencyTo });
     const rate =
-      currencyRatesSell.find((_) => _.code === codeTo)?.buy ||
-      currencyRatesSell.find((_) => _.code === codeFrom)?.sell;
+      currencyRatesSell.find((_) => _.currency?.currency === currencyTo)?.buyExchangeRate ||
+      currencyRatesSell.find((_) => _.currency?.currency === currencyFrom)?.saleExchangeRate;
     if (rate) {
       setCalcState({
-        inputBuy: String(calculateResult(value, rate, codeFrom === Currency.RUB) || ''),
+        inputBuy: String(calculateResult(value, rate, currencyFrom === Currency.RUB) || ''),
       });
     }
   };
 
 const handleInputBuy =
   (setCalcState: (state: Partial<CalcState>) => void, currencyRatesBuy: ExchangeCurrencyItem[]) =>
-  (value: string, codeTo: Currency, codeFrom: Currency) => {
-    setCalcState({ inputBuy: formatValue(value), selectSell: codeFrom });
+  (value: string, currencyTo: Currency, currencyFrom: Currency) => {
+    setCalcState({ inputBuy: formatValue(value), selectSell: currencyFrom });
     const rate =
-      currencyRatesBuy.find((_) => _.code === codeFrom)?.sell ||
-      currencyRatesBuy.find((_) => _.code === codeTo)?.buy;
+      currencyRatesBuy.find((_) => _.currency?.currency === currencyFrom)?.saleExchangeRate ||
+      currencyRatesBuy.find((_) => _.currency?.currency === currencyTo)?.buyExchangeRate;
     if (rate) {
       setCalcState({
-        inputSell: String(calculateResult(value, rate, codeTo === Currency.RUB) || ''),
+        inputSell: String(calculateResult(value, rate, currencyTo === Currency.RUB) || ''),
       });
     }
   };

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useExchangeRates } from '../../hooks/useExchangeRates';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -7,25 +6,23 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { Currency } from './CurrencyProps';
 import { CurrencyTable } from './CurrencyTable';
 import { CurrentLocation } from './CurrentLocation';
-import { ExchangeCurrencyCalculator } from './ExchangeCurrencyCalculator';
+import { ExchangeCurrencyCalculator, ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
-
-const DEFAULT_LOCATION = {
-  address: 'Москва, ул.Ленина д.28',
-  distance: '6км',
-};
+import { useFetchExchangeRateData } from './useFetchExchangeRateData';
 
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
-    const currencyRates = useExchangeRates();
+    const { exchangeRates } = useFetchExchangeRateData();
+
+    const currencyRates = getCurrencyRates(exchangeRates?.exchangeRate?.currencies);
 
-    const currencyRatesBuy = currencyRates.filter((_) => _.buy);
-    currencyRatesBuy.unshift({ code: Currency.RUB });
+    const currencyRatesBuy = currencyRates.filter((_) => _.buyExchangeRate);
+    currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
 
-    const currencyRatesSell = currencyRates.filter((_) => _.sell);
-    currencyRatesSell.push({ code: Currency.RUB });
+    const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
+    currencyRatesSell.push({ currency: { currency: Currency.RUB } });
 
     return (
       <BlockWrapper
@@ -44,7 +41,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
               {currencyRates ? (
                 <CurrencyTable className="mb-[30px]" exchangeCurrencyItems={currencyRates} />
               ) : null}
-              <CurrentLocation {...DEFAULT_LOCATION} />
+              <CurrentLocation address={exchangeRates?.address} />
             </div>
             {currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (
               <ExchangeCurrencyCalculator
@@ -61,3 +58,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     );
   },
 );
+
+const getCurrencyRates = (currencies?: ExchangeCurrencyItem[]) => {
+  return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
+};

package/src/components/ExchangeRateTile/callbackCurrencySelect.ts

@@ -4,7 +4,7 @@ import { Currency } from './CurrencyProps';
 interface TableFuncProps {
   value: Currency;
   oppositeValue: Currency;
-  handleConvert: (codeFrom?: Currency, codeTo?: Currency) => void;
+  handleConvert: (currencyFrom?: Currency, currencyTo?: Currency) => void;
 }
 
 export const callbackCurrencySelect = (props: TableFuncProps) =>

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,6 +1,6 @@
 import { Input } from '../../ui-kit/Input/Input';
-import { Select } from '../../ui-kit/Select/Select';
 import type { OptionProps } from '../../ui-kit/Select/Select';
+import { Select } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 
@@ -15,7 +15,10 @@ interface InputProps {
 
 export function renderInput(props: InputProps) {
   const { placeholder, rates, selected, value, setValue, setSelected } = props;
-  const ratesOptions: OptionProps[] = rates.map((_) => ({ key: _.code ?? '', text: _.code ?? '' }));
+  const ratesOptions: OptionProps[] = rates.map((_) => ({
+    key: _?.currency?.currency ?? '',
+    text: _?.currency?.currency ?? '',
+  }));
   const selectedValue: OptionProps = { key: selected, text: selected };
 
   return (

package/src/components/ExchangeRateTile/useFetchExchangeRateData.ts

@@ -0,0 +1,71 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { ExchangeCurrencyItem } from '../../components/ExchangeRateTile/ExchangeCurrencyCalculator';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+export interface ExchangeData {
+  exchangeRate?: {
+    currencies?: ExchangeCurrencyItem[];
+  };
+  address?: string;
+}
+
+export interface RegionData {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+const EXCHANGE_RATES_URL = '/api/v1/exchangerates';
+const REGION_URL = '/api/v1/region';
+
+export function useFetchExchangeRateData() {
+  const { data } = useAsyncData<{
+    region?: RegionData;
+    exchangeRates?: ExchangeData;
+  }>(EXCHANGE_RATES_URL, fetchData);
+
+  return data || {};
+}
+
+export function useCurrentPosition() {
+  const { data } = useAsyncData<RegionData>(REGION_URL, fetchJSONUnsafe);
+
+  return data || {};
+}
+
+const fetchData = async (
+  urlExchangeRates: string,
+): Promise<{
+  region: RegionData;
+  exchangeRates: ExchangeData;
+}> => {
+  const region = await fetchRegion();
+
+  const regionCode = region?.code || '000';
+
+  const exchangeRates = await fetchExchangeRates(urlExchangeRates, regionCode);
+
+  return { region, exchangeRates };
+};
+
+const fetchRegion = async (): Promise<RegionData> => {
+  try {
+    return await fetchJSONUnsafe<RegionData>(REGION_URL, { method: 'GET' });
+  } catch (error) {
+    console.log(error);
+
+    return {};
+  }
+};
+
+const fetchExchangeRates = async (url: string, regionCode: string): Promise<ExchangeData> => {
+  try {
+    return await fetchJSONUnsafe<ExchangeData>(url + `?regionCode=${regionCode}`, {
+      method: 'GET',
+    });
+  } catch (error) {
+    console.log(error);
+
+    return {};
+  }
+};

package/src/components/Gallery/Gallery.fixture.tsx

@@ -1,7 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { Gallery } from './Gallery';
 import type { GalleryProps } from './GalleryProps';
 const isDotted = true;
@@ -28,7 +27,7 @@ const buttonPrimaryIcon: ButtonWithIconProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
-  appendLeft: <Img image={{ icon: 'BankIcon' }} width="24" height="24" asSVG />,
+  icon: { icon: 'BankIcon' },
 };
 
 const defaultItems = [

package/src/components/Gallery/GalleryCardInner.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
-import { Button } from '../../ui-kit/Button/Button';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
@@ -30,7 +30,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
           {items?.length ? renderItems(items, isDotted, version) : null}
           {renderAdditionalDescription(additionalDescription)}
         </div>
-        {button?.text ? <Button className="mt-6" {...button} /> : null}
+        {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
       </div>
     );
   },

package/src/components/Gallery/GalleryInner.tsx

@@ -3,11 +3,11 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
 import type { GalleryContent } from './GalleryContent';
-import { Button } from '../../ui-kit/Button/Button';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
   version?: GalleryVersion;
@@ -54,7 +54,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
           </div>
         ) : null}
 
-        {button ? <Button className="mt-8 mx-auto" {...button} /> : null}
+        {button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null}
       </BlockWrapper>
     );
   },

package/src/components/Header/DropdownMenu.tsx

@@ -67,15 +67,15 @@ const renderDotsSubMenuItems = ({
 }: DotsSubMenuItemsProps) => {
   const isActive = (item: LinkProps) => item === activeSubItem;
 
-  return menuItems?.map((_) => (
+  return menuItems?.map(({ text, ...rest }) => (
     <a
-      key={_.href}
-      {...useLink({ router, handlerDecorator }, _)}
+      key={rest.href}
+      {...useLink({ router, handlerDecorator }, rest)}
       className={`text-l-light pb-4 hover:text-primary-main ${
-        isActive(_) ? 'text-primary-main' : ''
+        isActive(rest) ? 'text-primary-main' : ''
       }`}
     >
-      {_.text}
+      {text}
     </a>
   ));
 };