65 lines
2.0 KiB
JavaScript
65 lines
2.0 KiB
JavaScript
// src/views/Community/components/EventCard/EventFollowButton.js
|
||
import React from 'react';
|
||
import { IconButton, Box } from '@chakra-ui/react';
|
||
import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
|
||
|
||
/**
|
||
* 事件关注按钮组件
|
||
* @param {Object} props
|
||
* @param {boolean} props.isFollowing - 是否已关注
|
||
* @param {number} props.followerCount - 关注数
|
||
* @param {Function} props.onToggle - 切换关注状态的回调函数
|
||
* @param {string} props.size - 按钮尺寸（'xs' | 'sm' | 'md'，默认 'sm'）
|
||
* @param {boolean} props.showCount - 是否显示关注数（默认 true）
|
||
*/
|
||
const EventFollowButton = ({
|
||
isFollowing,
|
||
followerCount = 0,
|
||
onToggle,
|
||
size = 'sm',
|
||
showCount = true
|
||
}) => {
|
||
const iconSize = size === 'xs' ? '16px' : size === 'sm' ? '18px' : '22px';
|
||
|
||
const handleClick = (e) => {
|
||
e.stopPropagation();
|
||
onToggle?.();
|
||
};
|
||
|
||
return (
|
||
<Box display="inline-flex" alignItems="center" gap={1}>
|
||
<IconButton
|
||
size={size}
|
||
colorScheme="yellow"
|
||
variant="ghost"
|
||
bg="rgba(113, 128, 150, 0.6)"
|
||
boxShadow="sm"
|
||
_hover={{
|
||
bg: 'rgba(113, 128, 150, 0.8)',
|
||
boxShadow: 'md'
|
||
}}
|
||
icon={
|
||
isFollowing ? (
|
||
<AiFillStar
|
||
size={iconSize}
|
||
color="gold"
|
||
/>
|
||
) : (
|
||
<AiOutlineStar
|
||
size={iconSize}
|
||
color="gold"
|
||
/>
|
||
)
|
||
}
|
||
onClick={handleClick}
|
||
aria-label={isFollowing ? '取消关注' : '关注'}
|
||
/>
|
||
{/* <Box fontSize="xs" color="gray.500">
|
||
{followerCount || 0}
|
||
</Box> */}
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default EventFollowButton;
|