65 lines
3.1 KiB
TypeScript
65 lines
3.1 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { Input, Layout, Avatar, Button, Dropdown } from 'antd';
|
||
|
|
import { SearchOutlined, UserOutlined } from '@ant-design/icons';
|
||
|
|
import { useAuth } from '@web/src/providers/auth-provider';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
import { UserMenu } from './UserMenu';
|
||
|
|
import { NavigationMenu } from './NavigationMenu';
|
||
|
|
|
||
|
|
const { Header } = Layout;
|
||
|
|
|
||
|
|
export function MainHeader() {
|
||
|
|
const [searchValue, setSearchValue] = useState('');
|
||
|
|
const { isAuthenticated, user } = useAuth();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
|
||
|
|
<div className="w-full max-w-screen-2xl px-4 md:px-6 mx-auto flex items-center justify-between h-full">
|
||
|
|
<div className="flex items-center space-x-8">
|
||
|
|
<div
|
||
|
|
onClick={() => navigate('/')}
|
||
|
|
className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer"
|
||
|
|
>
|
||
|
|
烽火慕课
|
||
|
|
</div>
|
||
|
|
<NavigationMenu />
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center space-x-6">
|
||
|
|
<div className="group relative">
|
||
|
|
<Input
|
||
|
|
size="large"
|
||
|
|
prefix={<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />}
|
||
|
|
placeholder="搜索课程"
|
||
|
|
className="w-72 rounded-full"
|
||
|
|
value={searchValue}
|
||
|
|
onChange={(e) => setSearchValue(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{isAuthenticated ? (
|
||
|
|
<Dropdown
|
||
|
|
overlay={<UserMenu />}
|
||
|
|
trigger={['click']}
|
||
|
|
placement="bottomRight"
|
||
|
|
>
|
||
|
|
<Avatar
|
||
|
|
size="large"
|
||
|
|
className="cursor-pointer hover:scale-105 transition-all bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold"
|
||
|
|
>
|
||
|
|
{(user?.showname || user?.username || '')[0]?.toUpperCase()}
|
||
|
|
</Avatar>
|
||
|
|
</Dropdown>
|
||
|
|
) : (
|
||
|
|
<Button
|
||
|
|
onClick={() => navigate('/login')}
|
||
|
|
className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
|
||
|
|
icon={<UserOutlined />}
|
||
|
|
>
|
||
|
|
登录
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Header>
|
||
|
|
);
|
||
|
|
}
|