You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

98 lines
2.7 KiB

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 (
<NavLink
to={page.link}
className="flex flex-col justify-center itemms-center"
onClick={() => setActiveLink(page.link)}
>
<img
className="w-7 h-7 mx-auto"
src={activeLink === page.link ? page.activeIcon : page.deactiveIcon}
alt=""
/>
<span className="text-blueB9 text-xs text-center font-bold mt-1">
{page.name}
</span>
</NavLink>
);
};
return (
<>
<footer
className="w-full flex flex-row justify-around items-center fixed bottom-0 left-0 py-2 z-20 lg:hidden"
style={{ background: isDark ? "hsla(209, 39%, 28%)" : "#E8FCFF" }}
>
{pages.map((page, index) => (
<Tab page={page} key={index} />
))}
</footer>
</>
);
};
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(BottomNavigation);
BottomNavigation.defaultProps = {
pages: [
{
id: 0,
name: `${window.t("صفحه اصلی")}`,
link: "/",
activeIcon: activeHomeIcon,
deactiveIcon: deactiveHomeIcon,
},
{
id: 1,
name: `${window.t("محصولات")}`,
link: "/products",
activeIcon: activeProductsIcon,
deactiveIcon: deactiveProductsIcon,
},
{
id: 2,
name: `${window.t("ویدئو")}`,
link: "/videos",
activeIcon: activeVideoIcon,
deactiveIcon: deactiveVideoIcon,
},
{
id: 3,
name: `${window.t("سبد خرید")}`,
link: "/cart",
activeIcon: activeTestIcon,
deactiveIcon: deactiveTestIcon,
},
{
id: 4,
name: `${window.t("حساب کاربری")}`,
link: "/dashboard",
activeIcon: activeProfileIcon,
deactiveIcon: deactiveProfileIcon,
},
],
};