import React, { useState } from "react"; import { NavLink } from "react-router-dom"; import { connect } from "react-redux"; //assets import deactiveHomeIcon from "./bottom-home-deactive.svg"; import deactiveProductsIcon from "./bottom-products-deactive.svg"; import deactiveVideoIcon from "./bottom-video-deactive.svg"; import deactiveProfileIcon from "./bottom-profile-deactive.svg"; import deactiveTestIcon from "./bottom-test-deactive.svg"; import activeHomeIcon from "./bottom-home-active.svg"; import activeTestIcon from "./bottom-test-active.svg"; import activeProfileIcon from "./bottom-profile-active.svg"; import activeProductsIcon from "./bottom-products-active.svg"; import activeVideoIcon from "./bottom-video-active.svg" export const BottomNavigation = ({ pages, isDark }) => { const [activeLink, setActiveLink] = useState("/"); const Tab = ({ page }) => { return ( setActiveLink(page.link)} > {page.name} ); }; return ( <> ); }; const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, }); const mapDispatchToProps = {}; export default connect(mapStateToProps, mapDispatchToProps)(BottomNavigation); BottomNavigation.defaultProps = { pages: [ { id: 0, name: "صفحه اصلی", link: "/", activeIcon: activeHomeIcon, deactiveIcon: deactiveHomeIcon, }, { id: 1, name: "محصولات", link: "/products", activeIcon: activeProductsIcon, deactiveIcon: deactiveProductsIcon, }, { id: 2, name: "ویدئو", link: "/videos", activeIcon: activeVideoIcon, deactiveIcon: deactiveVideoIcon, }, { id: 3, name: "آزمون", link: "/test", activeIcon: activeTestIcon, deactiveIcon: deactiveTestIcon, }, { id: 4, name: "حساب کاربری", link: "/profile", activeIcon: activeProfileIcon, deactiveIcon: deactiveProfileIcon, }, ], };