@redneckz/wildless-cms-uni-blocks 0.13.8 → 0.13.10

package/src/components/DepositFiltration/DepositFiltration.fixture.tsx

@@ -78,7 +78,17 @@ const SCHEMA: DepositFiltrationContent['filtrationSchema'] = {
   },
   sum: {
     title: 'Сумма',
-    type: 'number',
+    type: 'object',
+    properties: {
+      min: {
+        title: 'Минимум',
+        type: 'number',
+      },
+      max: {
+        title: 'Максимум',
+        type: 'number',
+      },
+    },
   },
   period: {
     title: 'Срок',
@@ -109,7 +119,7 @@ export default {
         filtrationSchema={SCHEMA}
         topItemsCount={2}
         sumInput={{ title: 'Сумма' }}
-        periodInput={{ title: 'Срок, месяцев', min: 3, max: 36 }}
+        periodInput={{ title: 'Срок, месяцев', min: 3, max: 60 }}
         resetButton={{ text: 'Очистить фильтры', version: 'secondary' }}
         notFound={{
           title: 'Нет подходящей программы',
@@ -125,7 +135,7 @@ export default {
               OPTIONS_PENSIONER,
               PERCENTS_IN_THE_END,
               {
-                sum: 5000,
+                sum: { min: 500, max: 5000 },
                 period: { min: 9, max: 38 },
               },
             ),
@@ -135,7 +145,10 @@ export default {
               OPTIONS_ADD,
               OPTIONS_ONLINE,
               PERCENTS_EACH_MONTH,
-              { sum: 1000, period: { min: 9, max: 38 } },
+              {
+                sum: { min: 500, max: 1000 },
+                period: { min: 9, max: 38 },
+              },
             ),
             generateBlock(
               PRODUCT_TILE,
@@ -144,7 +157,7 @@ export default {
               OPTIONS_PENSIONER,
               PERCENTS_EACH_MONTH,
               {
-                sum: 500,
+                sum: { min: 500, max: 1500 },
                 period: { min: 9, max: 38 },
               },
             ),
@@ -155,7 +168,7 @@ export default {
               OPTIONS_PENSIONER,
               PERCENTS_EACH_MONTH,
               {
-                sum: 1000,
+                sum: { min: 500, max: 1000 },
                 period: { min: 9, max: 38 },
               },
             ),
@@ -166,7 +179,7 @@ export default {
               OPTIONS_ONLINE,
               PERCENTS_IN_THE_END,
               {
-                sum: 1000,
+                sum: { min: 500, max: 1000 },
                 period: { min: 9, max: 38 },
               },
             ),
@@ -177,7 +190,7 @@ export default {
               OPTIONS_PENSIONER,
               PERCENTS_EACH_MONTH,
               {
-                sum: 1000,
+                sum: { min: 500, max: 1000 },
                 period: { min: 9, max: 38 },
               },
             ),

package/src/components/DepositFiltration/DepositFiltration.tsx

@@ -11,25 +11,28 @@ import type { DepositFiltrationContent } from './DepositFiltrationContent';
 
 interface DepositFiltrationProps extends DepositFiltrationContent, UniBlockProps {}
 
+const DEFAULT_MIN_MONTHS = 3;
+const DEFAULT_MAX_MONTHS = 60;
+
+const DEFAULT_MIN_SUM = 500;
+const DEFAULT_MAX_SUM = 1000000000;
+
 const initialFiltrationState = {
-  sum: 500,
+  sum: {
+    min: 10000,
+    max: DEFAULT_MAX_SUM,
+  },
   period: {
     min: 3,
     max: 36,
   },
 };
 
-const DEFAULT_MIN_MONTHS = 3;
-const DEFAULT_MAX_MONTHS = 36;
-
-const DEFAULT_MIN_SUM = 500;
-const DEFAULT_MAX_SUM = 1000000000;
-
 export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFiltrationProps>(
   ({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
     const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
-    const maxValue = periodInput?.max || DEFAULT_MAX_MONTHS;
+    const maxPeriodValue = periodInput?.max || DEFAULT_MAX_MONTHS;
 
     const Inputs = (
       <div>
@@ -37,15 +40,18 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
           label={sumInput?.title}
           min={DEFAULT_MIN_SUM}
           max={DEFAULT_MAX_SUM}
-          {...field('sum', { parse: Number, format: String })}
+          {...field('sum', {
+            parse: (min) => ({ min: Number(min), max: DEFAULT_MAX_SUM }),
+            format: ({ min }) => String(min),
+          })}
         />
         <InputRange
           title={periodInput?.title}
-          items={['От 3 мес', 'До 3 лет']}
+          items={['От 3 мес', 'До 5 лет']}
           min={periodInput?.min || DEFAULT_MIN_MONTHS}
-          max={maxValue}
+          max={maxPeriodValue}
           {...field('period', {
-            parse: (min) => ({ min, max: maxValue }),
+            parse: (min) => ({ min, max: maxPeriodValue }),
             format: ({ min }) => min,
           })}
         />

package/src/components/DepositFiltration/DepositFiltrationContent.ts

@@ -1,7 +1,6 @@
 import type {
   BaseFiltrationInnerContent,
   NumberRange,
-  NumberValue,
   StringArray,
 } from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
 
@@ -13,7 +12,7 @@ export type DepositFiltrationSchema = {
   /** @title Выплата процентов */
   percents?: StringArray;
   /** @hidden */
-  sum?: NumberValue;
+  sum?: NumberRange;
   /** @hidden */
   period?: NumberRange;
 };

package/src/components/Header/Header.tsx

@@ -1,7 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useRouter } from '../../hooks/useRouter';
+import { projectSettings } from '../../ProjectSettings';
+import { useActiveRoute } from '../../hooks/useActiveRoute';
+import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
@@ -10,7 +13,6 @@ import { style } from '../../utils/style';
 import type { HeaderProps } from './HeaderProps';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
-import { isTopItemActive } from './isTopItemActive';
 
 const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
   'bg-white': 'primary',
@@ -19,12 +21,16 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 
 export const Header = JSX<HeaderProps>(
   ({ className, bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
-    const router = useRouter();
-
-    const { topItems, logo, officesLink, internetBankUrl, defaultLocation } = useSitemap(
+    const { topItems, logo, officesLink, defaultLocation } = useSitemap(
       rest.options?.page?.fallback,
     );
-    const activeTopItem = topItems?.find(isTopItemActive(router));
+    const [, activeTopItem] = useActiveRoute(topItems);
+
+    const { internetBankUrl } = useSWRResource<SitemapData>(
+      projectSettings.PORTAL_DATA || 'portal-data',
+      {},
+      'portal-resources',
+    );
 
     return (
       <BlockWrapper

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,20 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { projectSettings } from '../../ProjectSettings';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
+import { projectSettings } from '../../ProjectSettings';
 import { DropdownMenu } from './DropdownMenu';
+import { findActiveSubItem } from './findActiveSubItem';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 import { InternetBankButton } from './InternetBankButton';
-import { findActiveSubItem } from './findActiveSubItem';
+
+interface HeaderSubMenuLinkProps extends LinkProps {
+  displayArea?: string;
+}
 
 export interface HeaderSubMenuProps {
   version?: BlockVersion;
-  subItems?: LinkProps[];
+  subItems?: HeaderSubMenuLinkProps[];
   internetBankUrl?: string;
 }
 
@@ -24,24 +28,28 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
 
     const router = useRouter();
 
+    const visibleSubItems = useMemo(
+      () => subItems.filter((item) => !item.displayArea || item.displayArea === 'Header'),
+      [subItems],
+    );
     const activeSubItem = findActiveSubItem(router)(subItems);
 
-    const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+    const [visibleItemsCount, setVisibleItemsCount] = useState(visibleSubItems.length);
 
-    const dropDownMenuItems = subItems.slice(visibleItemsCount);
+    const dropDownMenuItems = visibleSubItems.slice(visibleItemsCount);
 
     const subItemsListRef = useRef<HTMLDivElement | null>(null);
     const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
     const subItemsVisibilityHandlers = useMemo(
       () =>
-        subItems.map((_, index) => (isIntersecting: boolean) => {
+        visibleSubItems.map((_, index) => (isIntersecting: boolean) => {
           setVisibleItemsCount(
             isIntersecting
               ? handleIntersectionActivation(index)
               : handleIntersectionDeactivation(index),
           );
         }),
-      [subItems],
+      [visibleSubItems],
     );
 
     return (
@@ -50,7 +58,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
           ref={subItemsListRef}
           className="overflow-hidden whitespace-nowrap pb-s mt-xs space-x-3xl"
         >
-          {subItems.map((_, i) => (
+          {visibleSubItems.map((_, i) => (
             <HeaderSubMenuItem
               key={String(i)}
               className={visibleItemsCount - 1 < i ? 'invisible' : ''}

package/src/components/PictureText/PictureText.tsx

@@ -25,7 +25,7 @@ export const PictureText = JSX<PictureTextProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         align={align}
-        isInsetTitle={false}
+        isFullWidthTitle={false}
         imageOptions={{ directionRight: false, imageAlign: 'center', ...imageOptions }}
         {...rest}
       >

package/src/components/StickyBottomMenu/ActiveSubMenu.tsx

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { ActiveSubMenuItem } from './ActiveSubMenuItem';
+
+interface ActiveSubMenuProps {
+  activeMenuSubItems?: LinkProps[];
+}
+export const ActiveSubMenu = JSX<ActiveSubMenuProps>(({ activeMenuSubItems }) => {
+  return activeMenuSubItems ? (
+    <div className="mb-5">
+      {activeMenuSubItems.map((_, i) => (
+        <ActiveSubMenuItem item={_} i={i} />
+      ))}
+    </div>
+  ) : null;
+});

package/src/components/StickyBottomMenu/ActiveSubMenuItem.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { useLink } from '../../hooks/useLink';
+import { Img } from '../../ui-kit/Img/Img';
+
+interface ActiveSubMenuItemProps {
+  item: LinkProps;
+  i: number;
+}
+
+export const ActiveSubMenuItem = JSX<ActiveSubMenuItemProps>(({ item, i }) => {
+  const link = useLink();
+  const { href, target, onClick } = link(item);
+
+  return (
+    <a
+      key={`subItems-${String(i)}`}
+      className="py-3 text-h5 font-light flex justify-between cursor-pointer"
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {item.text}
+      <Img
+        image={{ icon: 'ChevronLeftIcon', iconVersion: 'black' }}
+        width="24"
+        height="24"
+        className="text-secondary-text rotate-180 opacity-30"
+      />
+    </a>
+  );
+});

package/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -0,0 +1,102 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLocation } from '../../hooks/useLocation';
+import { Img } from '../../ui-kit/Img/Img';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { Text } from '../../ui-kit/Text/Text';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+import { TopItemMobile } from './TopItemMobile';
+import { ActiveSubMenu } from './ActiveSubMenu';
+import { Dialog } from '../../ui-kit/DialogManager/Dialog';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { RefObject } from 'react';
+import { useActiveRoute } from '../../hooks/useActiveRoute';
+
+interface BurgerMenuDialogProps extends UniBlockProps {
+  containerRef?: RefObject<HTMLDivElement>;
+}
+
+export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
+  const { topItems, officesLink, defaultLocation } = useSitemap(props.options?.page?.fallback);
+  const [location] = useLocation(defaultLocation);
+  const locationDialog = useLocationDialog();
+  const openLocationDialog = useCallback(() => locationDialog.open(), []);
+  const itemCount = Array.isArray(topItems) ? topItems.length : 0;
+  const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+    itemCount,
+  });
+  const [activeTopItemIndex, activeRoute] = useActiveRoute(topItems);
+  const activeMenuSubItems = activeRoute?.items || [];
+
+  useEffect(() => {
+    if (activeTopItemIndex > 0) {
+      scroll.scrollTo(activeTopItemIndex);
+    }
+  }, [activeTopItemIndex, scroll]);
+
+  return (
+    <Dialog
+      head={
+        <div className="flex items-center">
+          <Heading as="h4" title="Меню" />
+        </div>
+      }
+    >
+      <div className="flex flex-col flex-nowrap relative w-full h-auto m-auto bg-white pb-24 box-border rounded-md">
+        <div className="w-full mb-3">
+          <SwipeListContainer
+            containerRef={containerRef}
+            visibleItemCount={0}
+            gap={20}
+            className="pb-3"
+          >
+            {topItems?.map((item, i) => (
+              <TopItemMobile item={item} i={i} isActive={activeTopItemIndex === i} />
+            ))}
+          </SwipeListContainer>
+        </div>
+        <div className="relative grow overflow-auto">
+          <ActiveSubMenu activeMenuSubItems={activeMenuSubItems} />
+          <SearchBar className="grow mb-5" />
+          {renderOfficeLink(officesLink)}
+          <div className="flex items-center text-s cursor-pointer" onClick={openLocationDialog}>
+            <Img
+              image={{ icon: 'GeolocationIcon', iconVersion: 'black' }}
+              width="24"
+              height="24"
+              className="text-primary-main box-border mr-xs bg-main-divider p-xs rounded-md"
+            />
+            <div className="flex flex-col items-start">
+              <Text size="text-h5">{location.name}</Text>
+              <Text color="text-secondary-text" size="text-s">
+                Ваша локация
+              </Text>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+});
+
+const renderOfficeLink = (officesLink?: string) =>
+  officesLink ? (
+    <a
+      className="flex items-center mb-3"
+      href={officesLink}
+      rel="noopener noreferrer"
+      aria-label="Офисы и банкоматы"
+    >
+      <Img
+        image={{ icon: 'MapOpenedIcon', iconVersion: 'black' }}
+        width="24"
+        height="24"
+        className="text-primary-main box-border mr-xs bg-main-divider p-xs rounded-md"
+      />
+      <span>Офисы и банкоматы</span>
+    </a>
+  ) : null;

package/src/components/StickyBottomMenu/StickyBottomMenu.example.json

@@ -0,0 +1,35 @@
+{
+  "content": {
+    "title": "Кнопки меню",
+    "menuItems": [
+      {
+        "title": "Кредиты",
+        "url": "#EmptyWalletIcon",
+        "icon": {
+          "icon": "EmptyWalletIcon"
+        }
+      },
+      {
+        "title": "Карты",
+        "url": "#CardIcon",
+        "icon": {
+          "icon": "CardIcon"
+        }
+      },
+      {
+        "title": "Вклады",
+        "url": "#SafeIcon",
+        "icon": {
+          "icon": "SafeIcon"
+        }
+      },
+      {
+        "title": "Инвестиции",
+        "url": "#ChartIcon",
+        "icon": {
+          "icon": "ChartIcon"
+        }
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,36 @@
+import '../../setup-fixture';
+import { StickyBottomMenu } from './StickyBottomMenu';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import type { MenuItem } from './StickyBottomMenuContent';
+
+const MENU_ITEMS: MenuItem[] = [
+  {
+    title: 'Кредиты',
+    url: '#EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
+  },
+  {
+    title: 'Карты',
+    url: '#CardIcon',
+    icon: { icon: 'CardIcon' },
+  },
+  {
+    title: 'Вклады',
+    url: '#SafeIcon',
+    icon: { icon: 'SafeIcon' },
+  },
+  {
+    title: 'Инвестиции',
+    url: '#ChartIcon',
+    icon: { icon: 'ChartIcon' },
+  },
+];
+
+export default {
+  default: (
+    <div>
+      <StickyBottomMenu menuItems={MENU_ITEMS} />
+      <DialogManager />
+    </div>
+  ),
+};

package/src/components/StickyBottomMenu/StickyBottomMenu.fixture.tsx

@@ -0,0 +1,36 @@
+import '../../setup-fixture';
+import { StickyBottomMenu } from './StickyBottomMenu';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import type { MenuItem } from './StickyBottomMenuContent';
+
+export const MENU_ITEMS: MenuItem[] = [
+  {
+    title: 'Кредиты',
+    url: '#EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
+  },
+  {
+    title: 'Карты',
+    url: '#CardIcon',
+    icon: { icon: 'CardIcon' },
+  },
+  {
+    title: 'Вклады',
+    url: '#SafeIcon',
+    icon: { icon: 'SafeIcon' },
+  },
+  {
+    title: 'Инвестиции',
+    url: '#ChartIcon',
+    icon: { icon: 'ChartIcon' },
+  },
+];
+
+export default {
+  default: (
+    <div>
+      <StickyBottomMenu menuItems={MENU_ITEMS} />
+      <DialogManager />
+    </div>
+  ),
+};

package/src/components/StickyBottomMenu/StickyBottomMenu.mobile.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { BurgerMenuDialog } from './BurgerMenuDialog';
+import { useBurgerMenuDialog } from './useBurgerMenuDialog';
+import type { MenuItemProps, StickyBottomMenuProps } from './StickyBottomMenuProps';
+import { useSWRResource } from '../../hooks/useSWRResource';
+import { projectSettings } from '../../ProjectSettings';
+import { renderMenuItems } from './renderMenuItems';
+
+export const StickyBottomMenu = JSX<StickyBottomMenuProps>(({ ...rest }) => {
+  const { menuItems = [] } = useSWRResource<StickyBottomMenuProps>(
+    projectSettings.STICKY_MOBILE_MENU || 'stickyBottomMenu',
+    rest.options?.page?.fallback,
+  );
+
+  const [isBurgerMenuDialogOpen, { toggle }] = useBurgerMenuDialog();
+
+  const burgerMenu = {
+    title: 'Меню',
+    icon: {
+      icon: 'BurgerIcon',
+      iconVersion: isBurgerMenuDialogOpen ? 'color' : 'black',
+    },
+    isActive: isBurgerMenuDialogOpen,
+  };
+  const middleIdx = Math.floor(menuItems.length / 2);
+  const menuItemsWithButton = useMemo(
+    () =>
+      [
+        ...menuItems.slice(0, middleIdx),
+        burgerMenu,
+        ...menuItems.slice(middleIdx),
+      ] as MenuItemProps[],
+    [menuItems, middleIdx, burgerMenu],
+  );
+
+  return (
+    <div className="contents">
+      {renderMenuItems(menuItemsWithButton, toggle)}
+      {isBurgerMenuDialogOpen ? <BurgerMenuDialog /> : null}
+    </div>
+  );
+});

package/src/components/StickyBottomMenu/StickyBottomMenu.tsx

@@ -0,0 +1,4 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { StickyBottomMenuProps } from './StickyBottomMenuProps';
+
+export const StickyBottomMenu = JSX<StickyBottomMenuProps>(() => <div></div>); // DO not remove "<div></div>". Required to pass tests. With "null" it's falling.

package/src/components/StickyBottomMenu/StickyBottomMenu.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "menuItems": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/StickyBottomMenu/StickyBottomMenuContent.ts

@@ -0,0 +1,24 @@
+import { Picture } from '../../model/Picture';
+
+/**
+ * @title Пункт меню
+ */
+export interface MenuItem {
+  /** @title Название */
+  title?: string;
+  /** @title Адрес */
+  url?: string;
+  /** @title Иконка */
+  icon?: Picture;
+}
+
+/**
+ * @title Кнопки меню
+ */
+export interface StickyBottomMenuContent {
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  menuItems?: MenuItem[];
+}

package/src/components/StickyBottomMenu/StickyBottomMenuProps.tsx

@@ -0,0 +1,10 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { MenuItem, StickyBottomMenuContent } from './StickyBottomMenuContent';
+
+export interface MenuItemProps extends MenuItem {
+  isActive?: boolean;
+}
+
+export interface StickyBottomMenuProps extends StickyBottomMenuContent, UniBlockProps {
+  menuItems?: MenuItemProps[];
+}

package/src/components/StickyBottomMenu/TopItemMobile.tsx

@@ -0,0 +1,32 @@
+import type { TopMenuItemProps } from '../../services/sitemap/SitemapData';
+import { style } from '../../utils/style';
+import { useLink } from '../../hooks/useLink';
+
+interface TopItemProps {
+  item: TopMenuItemProps;
+  i: number;
+  isActive: boolean;
+}
+
+export const TopItemMobile = ({ item, i, isActive }: TopItemProps) => {
+  const link = useLink();
+  const { href, target, onClick } = link(item);
+
+  return (
+    <a
+      key={String(i)}
+      href={href}
+      target={target}
+      onClick={onClick}
+      className="relative"
+      aria-label={item.text}
+    >
+      <span className={style('whitespace-nowrap', isActive ? 'text-primary-main' : '')}>
+        {item.text}
+      </span>
+      {isActive ? (
+        <div className="absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" />
+      ) : null}
+    </a>
+  );
+};