TRM-coding | 29174c2 | 2025-06-18 23:56:51 +0800 | [diff] [blame] | 1 | import React from 'react'; |
| 2 | import { followUser, unfollowUser } from '../api/api_ljc'; |
| 3 | |
| 4 | const FollowButton = ({ userId, isFollowing, onFollowChange }) => { |
| 5 | const handleFollow = async () => { |
| 6 | try { |
| 7 | if (isFollowing) { |
| 8 | await unfollowUser(userId); |
| 9 | onFollowChange(false); |
| 10 | } else { |
| 11 | await followUser(userId); |
| 12 | onFollowChange(true); |
| 13 | } |
| 14 | } catch (error) { |
| 15 | console.error('关注操作失败:', error); |
| 16 | } |
| 17 | }; |
| 18 | |
| 19 | return ( |
| 20 | <button |
| 21 | onClick={handleFollow} |
| 22 | className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${ |
| 23 | isFollowing |
| 24 | ? 'bg-gray-100 text-gray-800 hover:bg-gray-200' |
| 25 | : 'bg-red-500 text-white hover:bg-red-600' |
| 26 | }`} |
| 27 | > |
| 28 | {isFollowing ? '已关注' : '关注'} |
| 29 | </button> |
| 30 | ); |
| 31 | }; |
| 32 | |
| 33 | export default FollowButton; |