| import React from 'react' |
| import { useNavigate } from 'react-router-dom' |
| import { User } from 'lucide-react' |
| import '../App.css' // 或者单独的 Header.css |
| |
| export default function Header() { |
| const navigate = useNavigate() |
| |
| const handleUserClick = () => { |
| navigate('/user/1') // 或者使用实际的用户ID |
| } |
| |
| return ( |
| <header className="header"> |
| <div className="header-left"> |
| <div className="logo">小红书</div> |
| <h1 className="header-title">创作服务平台</h1> |
| </div> |
| <div |
| className="header-right" |
| onClick={handleUserClick} |
| style={{ cursor: 'pointer' }} |
| > |
| <div className="user-info"> |
| <User size={16} /> |
| <span>小红薯1</span> |
| </div> |
| </div> |
| </header> |
| ) |
| } |