54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
|
/*
|
||
|
|
* @LastEditors: John
|
||
|
|
* @Date: 2024-07-13 18:07:43
|
||
|
|
* @LastEditTime: 2024-07-19 15:42:36
|
||
|
|
* @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";
|
||
|
|
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("/")}>
|
||
|
|
<AppOutline color={currentpathname == "/" ? "#ffffff" : "#adadad"} />
|
||
|
|
<span className={currentpathname == "/" ? classes.active : ""}>
|
||
|
|
Home
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li onClick={() => navigate("/friends")}>
|
||
|
|
<TeamFill
|
||
|
|
color={currentpathname == "/friends" ? "#ffffff" : "#adadad"}
|
||
|
|
/>
|
||
|
|
<span className={currentpathname == "/friends" ? classes.active : ""}>
|
||
|
|
Friends
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li onClick={() => navigate("/leaderboard")}>
|
||
|
|
<HistogramOutline
|
||
|
|
color={currentpathname == "/leaderboard" ? "#ffffff" : "#adadad"}
|
||
|
|
/>
|
||
|
|
<span
|
||
|
|
className={currentpathname == "/leaderboard" ? classes.active : ""}
|
||
|
|
>
|
||
|
|
Leaderboard
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|