| // src/pages/UserProfile.js |
| import React from 'react'; |
| |
| const UserProfile = () => { |
| // 假设用户信息保存在 state 或 context 中 |
| const user = { |
| avatar: 'path/to/avatar.jpg', // 用户头像 |
| username: 'WaldenBlues', // 用户名 |
| email: 'waldenblues@example.com', // 用户邮箱 |
| bio: '这是用户的个人简介', // 个人简介 |
| uploads: 12, // 上传的资源数量 |
| downloads: 34, // 下载的资源数量 |
| comments: 5 // 用户评论的数量 |
| }; |
| |
| return ( |
| <div className="user-profile"> |
| <div className="user-info"> |
| <img src={user.avatar} alt="User Avatar" className="avatar" /> |
| <h2>{user.username}</h2> |
| <p>{user.bio}</p> |
| <p>Email: {user.email}</p> |
| </div> |
| |
| <div className="user-stats"> |
| <h3>统计信息</h3> |
| <ul> |
| <li>上传的资源: {user.uploads}</li> |
| <li>下载的资源: {user.downloads}</li> |
| <li>评论的资源: {user.comments}</li> |
| </ul> |
| </div> |
| |
| <div className="user-actions"> |
| <button>Edit Profile</button> |
| <button>Change Password</button> |
| </div> |
| </div> |
| ); |
| } |
| |
| export default UserProfile; |