85 lines
1.9 KiB
TypeScript
85 lines
1.9 KiB
TypeScript
/**
|
|
* FavoriteButton - 通用关注/收藏按钮组件（图标按钮）
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { IconButton, Tooltip, Spinner } from '@chakra-ui/react';
|
|
import { Star } from 'lucide-react';
|
|
|
|
export interface FavoriteButtonProps {
|
|
/** 是否已关注 */
|
|
isFavorite: boolean;
|
|
/** 加载状态 */
|
|
isLoading?: boolean;
|
|
/** 点击回调 */
|
|
onClick: () => void;
|
|
/** 按钮大小 */
|
|
size?: 'sm' | 'md' | 'lg';
|
|
/** 颜色主题 */
|
|
colorScheme?: 'gold' | 'default';
|
|
/** 是否显示 tooltip */
|
|
showTooltip?: boolean;
|
|
}
|
|
|
|
// 颜色配置
|
|
const COLORS = {
|
|
gold: {
|
|
active: '#F4D03F', // 已关注 - 亮金色
|
|
inactive: '#C9A961', // 未关注 - 暗金色
|
|
hoverBg: 'whiteAlpha.100',
|
|
},
|
|
default: {
|
|
active: 'yellow.400',
|
|
inactive: 'gray.400',
|
|
hoverBg: 'gray.100',
|
|
},
|
|
};
|
|
|
|
const FavoriteButton: React.FC<FavoriteButtonProps> = ({
|
|
isFavorite,
|
|
isLoading = false,
|
|
onClick,
|
|
size = 'sm',
|
|
colorScheme = 'gold',
|
|
showTooltip = true,
|
|
}) => {
|
|
const colors = COLORS[colorScheme];
|
|
const currentColor = isFavorite ? colors.active : colors.inactive;
|
|
const label = isFavorite ? '取消关注' : '加入自选';
|
|
|
|
const iconButton = (
|
|
<IconButton
|
|
aria-label={label}
|
|
icon={
|
|
isLoading ? (
|
|
<Spinner size="sm" color={currentColor} />
|
|
) : (
|
|
<Star
|
|
size={size === 'sm' ? 18 : size === 'md' ? 20 : 24}
|
|
fill={isFavorite ? currentColor : 'none'}
|
|
stroke={currentColor}
|
|
/>
|
|
)
|
|
}
|
|
variant="ghost"
|
|
color={currentColor}
|
|
size={size}
|
|
onClick={onClick}
|
|
isDisabled={isLoading}
|
|
_hover={{ bg: colors.hoverBg }}
|
|
/>
|
|
);
|
|
|
|
if (showTooltip) {
|
|
return (
|
|
<Tooltip label={label} placement="top">
|
|
{iconButton}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return iconButton;
|
|
};
|
|
|
|
export default FavoriteButton;
|