Navigation.tsx

Обзор

Файл Navigation.tsx содержит реализацию React-компонента навигационной панели для мобильного интерфейса. Данный компонент предоставляет пользователю возможность переключаться между четырьмя основными разделами приложения: Profile (Профиль), Battle (Битва), Collection (Коллекция) и Settings (Настройки). Компонент визуально выделяет активную вкладку и уведомляет родительский компонент об изменении выбора. Дополнительно реализована имитация тактильной обратной связи при нажатии на вкладки через API вибрации браузера.

Описание компонентов и функций

NavigationProps (интерфейс)

Интерфейс описывает свойства, принимаемые компонентом Navigation.

Свойство	Тип	Описание
`activeTab`	`'profile' \	'battle' \
`onTabChange`	`(tab: 'profile' \	'battle' \

Navigation (React.FC)

Основной функциональный компонент навигации.

Параметры

activeTab: строка — текущая выбранная вкладка, одна из 'profile', 'battle', 'collection', 'settings'.
onTabChange: функция — обработчик изменения активной вкладки.

Логика и поведение

При клике на вкладку вызывается функция handleTabClick, которая:
- Вызывает onTabChange с выбранной вкладкой.
- Если браузер поддерживает API вибрации (navigator.vibrate), активирует вибрацию длиной 50 мс для тактильной обратной связи.
Визуально активная вкладка получает CSS-класс active, что позволяет выделить её стилями.

Возвращаемое значение

JSX-элемент навигационной панели:

<nav className='mobile-nav'>
  <div className='nav-container'>
    {/* Вкладки */}
  </div>
</nav>

Пример использования

import React, { useState } from 'react';
import Navigation from './Navigation';

const App = () => {
  const [tab, setTab] = useState<'profile' | 'battle' | 'collection' | 'settings'>('profile');

  const handleTabChange = (newTab: 'profile' | 'battle' | 'collection' | 'settings') => {
    setTab(newTab);
  };

  return (
    <div>
      <Navigation activeTab={tab} onTabChange={handleTabChange} />
      {/* Другой контент в зависимости от tab */}
    </div>
  );
};

Важные детали реализации

Типизация: Используется строгая типизация TypeScript, что повышает надёжность и удобство поддержки.
Тактильная обратная связь: Вызов navigator.vibrate(50) — это продуманное UX-решение для мобильных устройств, позволяющее дать пользователю тактильный отклик при смене вкладки.
CSS-классы: Активная вкладка получает дополнительный класс active, что позволяет стилизовать её отличительно.
Иконки: Вкладки сопровождаются эмодзи-иконками, упрощающими визуальное восприятие разделов.

Взаимодействие с другими частями системы

Компонент Navigation — часть пользовательского интерфейса приложения.
Он получает данные о текущей активной вкладке и функцию для изменения состояния из родительского компонента, что обеспечивает управление навигацией на верхнем уровне.
При смене вкладки Navigation уведомляет родительский компонент, который может подгружать соответствующий контент или изменять маршрутизацию.
Визуальные стили и контейнерные структуры предполагают использование глобальных CSS/SCSS-файлов, которые не входят в этот файл.

Диаграмма структуры компонента Navigation

classDiagram
    class Navigation {
        +activeTab: 'profile' | 'battle' | 'collection' | 'settings'
        +onTabChange(tab: 'profile' | 'battle' | 'collection' | 'settings'): void
        -handleTabClick(tab: 'profile' | 'battle' | 'collection' | 'settings'): void
        +render(): JSX.Element
    }
    Navigation ..> NavigationProps : implements

Резюме

Navigation.tsx — компактный, типизированный React-компонент, реализующий мобильную навигационную панель с четырьмя вкладками. Он обеспечивает переключение между разделами приложения с визуальным выделением и тактильной обратной связью, легко интегрируется в структуру приложения и поддерживает управление состоянием вкладок через callback. Такой компонент является важным элементом пользовательского опыта, обеспечивая удобную и понятную навигацию.