92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
/*
|
|
* @LastEditors: John
|
|
* @Date: 2024-07-13 18:07:43
|
|
* @LastEditTime: 2024-07-22 11:03:20
|
|
* @Author: John
|
|
*/
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import classes from "./BottomTab-m.module.css";
|
|
import { AppOutline, HistogramOutline, TeamFill } from "antd-mobile-icons";
|
|
import { useEffect, useState } from "react";
|
|
import home_fill from "@/assets/home-fill.svg";
|
|
import home_fill_active from "@/assets/home-fill-active.svg";
|
|
import Leaderboard_fill from "@/assets/Leaderboard-fill.svg";
|
|
import Leaderboard_fill_active from "@/assets/Leaderboard-fill-active.svg";
|
|
import user_fill from "@/assets/user-fill.svg";
|
|
import user_fill_active from "@/assets/user-fill-active.svg";
|
|
import Launchpool_fill from "@/assets/Launchpool-fill.svg";
|
|
import Launchpool_fill_active from "@/assets/Launchpool-fill-active.svg";
|
|
import Earns_fill from "@/assets/Earns-fill.svg";
|
|
import Earns_fill_active from "@/assets/Earns-fill-active.svg";
|
|
export default function () {
|
|
const navigate = useNavigate();
|
|
const { pathname } = useLocation();
|
|
const [currentpathname, setCurrentpathname] = useState("");
|
|
useEffect(() => {
|
|
console.log("pathname:", pathname);
|
|
setCurrentpathname(pathname);
|
|
return () => {};
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<>
|
|
<ul className={classes.bottomTab}>
|
|
<li onClick={() => navigate("/")}>
|
|
{currentpathname == "/" ? (
|
|
<>
|
|
<img src={home_fill_active} alt="" />
|
|
<span className={classes.active}>Home</span>
|
|
</>
|
|
) : (
|
|
<img src={home_fill} alt="" />
|
|
)}
|
|
</li>
|
|
|
|
<li onClick={() => navigate("/leaderboard")}>
|
|
{currentpathname == "/leaderboard" ? (
|
|
<>
|
|
<img src={Leaderboard_fill_active} alt="" />
|
|
<span className={classes.active}>Leaderboard</span>
|
|
</>
|
|
) : (
|
|
<img src={Leaderboard_fill} alt="" />
|
|
)}
|
|
</li>
|
|
|
|
<li onClick={() => navigate("/launchpool")}>
|
|
{currentpathname == "/launchpool" ? (
|
|
<>
|
|
<img src={Launchpool_fill} alt="" />
|
|
<span className={classes.active}>Launchpool</span>
|
|
</>
|
|
) : (
|
|
<img src={Launchpool_fill_active} alt="" />
|
|
)}
|
|
</li>
|
|
|
|
<li onClick={() => navigate("/earns")}>
|
|
{currentpathname == "/earns" ? (
|
|
<>
|
|
<img src={Earns_fill} alt="" />
|
|
<span className={classes.active}>Earns</span>
|
|
</>
|
|
) : (
|
|
<img src={Earns_fill_active} alt="" />
|
|
)}
|
|
</li>
|
|
|
|
<li onClick={() => navigate("/friends")}>
|
|
{currentpathname == "/friends" ? (
|
|
<>
|
|
<img src={user_fill_active} alt="" />
|
|
<span className={classes.active}>Friends</span>
|
|
</>
|
|
) : (
|
|
<img src={user_fill} alt="" />
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|