46 lines
1013 B
JavaScript
46 lines
1013 B
JavaScript
// src/views/Company/components/CompanyTabs/TabNavigation.js
|
|
// Tab 导航组件 - 动态渲染 Tab 按钮
|
|
|
|
import React from 'react';
|
|
import {
|
|
TabList,
|
|
Tab,
|
|
HStack,
|
|
Icon,
|
|
Text,
|
|
} from '@chakra-ui/react';
|
|
|
|
import { COMPANY_TABS, TAB_SELECTED_STYLE } from '../../constants';
|
|
|
|
/**
|
|
* Tab 导航组件
|
|
*
|
|
* @param {Object} props
|
|
* @param {string} props.tabBg - Tab 列表背景色
|
|
* @param {string} props.activeBg - 激活状态背景色
|
|
*/
|
|
const TabNavigation = ({ tabBg, activeBg }) => {
|
|
return (
|
|
<TabList p={4} bg={tabBg}>
|
|
{COMPANY_TABS.map((tab, index) => (
|
|
<Tab
|
|
key={tab.key}
|
|
_selected={{
|
|
bg: activeBg,
|
|
color: 'white',
|
|
...TAB_SELECTED_STYLE,
|
|
}}
|
|
mr={index < COMPANY_TABS.length - 1 ? 2 : 0}
|
|
>
|
|
<HStack spacing={2}>
|
|
<Icon as={tab.icon} />
|
|
<Text>{tab.name}</Text>
|
|
</HStack>
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
);
|
|
};
|
|
|
|
export default TabNavigation;
|