"use client" import type React from "react" import { useHistory, useLocation } from "react-router-dom" import { getRouteHome } from "../shared/consts/router" import { getRouteCourses } from "../shared/consts/router" import { getRouteCourseExercises } from "../shared/consts/router" import { getRouteSettings } from "../shared/consts/router" const BottomNavigation: React.FC = () => { const history = useHistory() const location = useLocation() // Define SVG icons directly within the component, with active state styling const HomeIcon = ({ active }: { active: boolean; size?: number }) => ( ) const CoursesIcon = ({ active }: { active: boolean; size?: number }) => ( ) const ExerciseIcon = ({ active }: { active: boolean; size?: number }) => ( ) const SettingsIcon = ({ active }: { active: boolean; size?: number }) => ( ) const navItems = [ { path: getRouteHome(), icon: HomeIcon, label: "Домой" }, { path: getRouteCourses(), icon: CoursesIcon, label: "Курсы" }, { path: getRouteCourseExercises(':id'), icon: ExerciseIcon, label: "Тренировка" }, { path: getRouteSettings(), icon: SettingsIcon, label: "Меню" }, ] const isActive = (path: string) => { // Проверка на совпадение или включение return location.pathname === path || location.pathname.startsWith(path); } return (
) } export default BottomNavigation