104 lines
2.4 KiB
JavaScript
104 lines
2.4 KiB
JavaScript
"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>
|
|
);
|
|
}
|