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> | |
) | |
} |