84 lines
1.7 KiB
JavaScript
84 lines
1.7 KiB
JavaScript
// src/components/SubscriptionBadge.js
|
||
// 会员专享标签组件
|
||
|
||
import React from 'react';
|
||
import {
|
||
Badge,
|
||
HStack,
|
||
Icon,
|
||
Text,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import { FaStar, FaCrown } from 'react-icons/fa';
|
||
import { logger } from '../utils/logger';
|
||
|
||
/**
|
||
* 会员专享标签组件
|
||
* @param {Object} props
|
||
* @param {'pro' | 'max'} props.tier - 会员等级：pro 或 max
|
||
* @param {'sm' | 'md'} props.size - 标签尺寸
|
||
*/
|
||
const SubscriptionBadge = ({ tier = 'pro', size = 'sm' }) => {
|
||
// PRO 和 MAX 配置
|
||
const config = {
|
||
pro: {
|
||
label: 'PRO专享',
|
||
icon: FaStar,
|
||
bgGradient: 'linear(to-r, blue.400, purple.500)',
|
||
color: 'white',
|
||
},
|
||
max: {
|
||
label: 'MAX专享',
|
||
icon: FaCrown,
|
||
bgGradient: 'linear(to-r, pink.400, red.500)',
|
||
color: 'white',
|
||
},
|
||
};
|
||
|
||
const tierConfig = config[tier] || config.pro;
|
||
|
||
// 尺寸配置
|
||
const sizeConfig = {
|
||
sm: {
|
||
fontSize: 'xs',
|
||
iconSize: 2.5,
|
||
px: 2,
|
||
py: 0.5,
|
||
},
|
||
md: {
|
||
fontSize: 'sm',
|
||
iconSize: 3,
|
||
px: 3,
|
||
py: 1,
|
||
},
|
||
};
|
||
|
||
const currentSize = sizeConfig[size] || sizeConfig.sm;
|
||
|
||
return (
|
||
<Badge
|
||
bgGradient={tierConfig.bgGradient}
|
||
color={tierConfig.color}
|
||
borderRadius="full"
|
||
px={currentSize.px}
|
||
py={currentSize.py}
|
||
fontSize={currentSize.fontSize}
|
||
fontWeight="bold"
|
||
boxShadow="sm"
|
||
display="inline-flex"
|
||
alignItems="center"
|
||
gap={1}
|
||
transition="all 0.2s"
|
||
_hover={{
|
||
transform: 'scale(1.05)',
|
||
boxShadow: 'md',
|
||
}}
|
||
>
|
||
<Icon as={tierConfig.icon} boxSize={currentSize.iconSize} />
|
||
<Text>{tierConfig.label}</Text>
|
||
</Badge>
|
||
);
|
||
};
|
||
|
||
export default SubscriptionBadge;
|