56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
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 } from '../../constants';
|
|
|
|
// 黑金主题颜色配置
|
|
const THEME_COLORS = {
|
|
bg: '#1A202C', // 背景纯黑
|
|
selectedBg: '#C9A961', // 选中项金色背景
|
|
selectedText: '#FFFFFF', // 选中项白色文字
|
|
unselectedText: '#999999', // 未选中项深灰色
|
|
};
|
|
|
|
/**
|
|
* Tab 导航组件（黑金主题）
|
|
*/
|
|
const TabNavigation = () => {
|
|
return (
|
|
<TabList py={4} bg={THEME_COLORS.bg} borderTopLeftRadius="16px" borderTopRightRadius="16px">
|
|
{COMPANY_TABS.map((tab, index) => (
|
|
<Tab
|
|
key={tab.key}
|
|
color={THEME_COLORS.unselectedText}
|
|
borderRadius="full"
|
|
px={4}
|
|
py={2}
|
|
_selected={{
|
|
bg: THEME_COLORS.selectedBg,
|
|
color: THEME_COLORS.selectedText,
|
|
}}
|
|
_hover={{
|
|
color: THEME_COLORS.selectedText,
|
|
}}
|
|
mr={index < COMPANY_TABS.length - 1 ? 2 : 0}
|
|
>
|
|
<HStack spacing={2}>
|
|
<Icon as={tab.icon} boxSize="18px" />
|
|
<Text fontSize="15px">{tab.name}</Text>
|
|
</HStack>
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
);
|
|
};
|
|
|
|
export default TabNavigation;
|