46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { View, Text } from "@tarojs/components";
|
|
import Taro from "@tarojs/taro";
|
|
import type { ReactNode } from "react";
|
|
import type { NavItem, NavKey } from "../../config";
|
|
import "./index.css";
|
|
|
|
const ACTIVE_COLOR = "#1976d2";
|
|
const DEFAULT_COLOR = "#9e9e9e";
|
|
const ICON_SIZE = 24;
|
|
|
|
interface BottomNavProps {
|
|
active: NavKey;
|
|
navItems: NavItem[];
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export default function BottomNav({ active, navItems, children }: BottomNavProps) {
|
|
const handleNavigate = (item: NavItem) => {
|
|
if (item.key === active) return;
|
|
Taro.redirectTo({ url: item.path });
|
|
};
|
|
|
|
return (
|
|
<View className="bottom-nav-wrapper">
|
|
<View className="bottom-nav-content">{children}</View>
|
|
<View className="bottom-nav">
|
|
{navItems.map((item) => {
|
|
const isActive = active === item.key;
|
|
const IconComp = item.icon;
|
|
const iconColor = isActive ? ACTIVE_COLOR : DEFAULT_COLOR;
|
|
return (
|
|
<View
|
|
key={item.key}
|
|
className={`bottom-nav-item${isActive ? " active" : ""}`}
|
|
onClick={() => handleNavigate(item)}
|
|
>
|
|
<IconComp size={ICON_SIZE} color={iconColor} />
|
|
<Text className="bottom-nav-label">{item.label}</Text>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|