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
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, |
|
}, |
|
], |
|
};
|
|
|