penguin_coop-tg-weapp/src/components/BottomTab.tsx

/*
 * @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>
    </>
  );
}