tiefen_space_h5/components/BottomNav/index.js

"use client";

import React from "react";
import { TabBar, Image } from "antd-mobile";
import "./index.css";
import { usePathname, useRouter } from "next/navigation";

export default function BottomNav() {
  const pathname = usePathname();
  const router = useRouter();
  const setRouteActive = (value) => {
    router.replace(value);
  };
  const tabs = [
    {
      key: "/",
      title: "广场",
      icon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/postblur.png"}
          />
        </div>
      ),
      activeIcon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/postfocus.png"
            }
          />
        </div>
      ),
    },
    {
      key: "/space",
      title: "空间",
      icon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/space_blur.png"
            }
          />
        </div>
      ),
      activeIcon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/space_focus.png"
            }
          />
        </div>
      ),
    },
    {
      key: "/my",
      title: "我的",
      icon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/myblur.png"}
          />
        </div>
      ),
      activeIcon: (
        <div className="w-8 h-8">
          <Image
            placeholder=""
            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/myfocus.png"}
          />
        </div>
      ),
    },
  ];
  const checkPath = () => {
    const pathnames = ["/", "/space", "/my"];
    const isActive = pathnames.some((path) => path === pathname);
    return isActive;
  };
  return (
    <TabBar
      activeKey={pathname}
      onChange={(value) => setRouteActive(value)}
      className={!checkPath() ? "hidden" : ""}
    >
      {tabs.map((item) => (
        <TabBar.Item
          key={item.key}
          icon={pathname === item.key ? item.activeIcon : item.icon}
          title={item.title}
          className="text-[#ffffff40]"
        />
      ))}
    </TabBar>
  );
}