59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { Form } from '@remix-run/react';
|
|
|
|
interface HeaderProps {
|
|
username: string;
|
|
}
|
|
|
|
export function Header({ username }: HeaderProps) {
|
|
return (
|
|
<header className="bg-white shadow-sm py-3 px-6 flex justify-between items-center">
|
|
<div className="flex items-center">
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="搜索..."
|
|
className="form-input pl-9 pr-3 py-1.5 w-64"
|
|
/>
|
|
<i className="ri-search-line absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="relative">
|
|
<button className="flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-100">
|
|
<i className="ri-notification-3-line text-xl text-gray-600"></i>
|
|
<span className="absolute top-1 right-1 w-4 h-4 bg-red-500 text-white text-xs flex items-center justify-center rounded-full">3</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="relative group">
|
|
<button className="flex items-center space-x-2 focus:outline-none">
|
|
<div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-medium">
|
|
{username.charAt(0)}
|
|
</div>
|
|
<span className="text-sm font-medium">{username}</span>
|
|
<i className="ri-arrow-down-s-line text-gray-400"></i>
|
|
</button>
|
|
|
|
<div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white hidden group-hover:block z-10">
|
|
<a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
|
<i className="ri-user-line mr-2"></i> 个人资料
|
|
</a>
|
|
<a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
|
<i className="ri-settings-3-line mr-2"></i> 账号设置
|
|
</a>
|
|
<Form action="/auth/logout" method="post">
|
|
<button
|
|
type="submit"
|
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
>
|
|
<i className="ri-logout-box-line mr-2"></i> 退出登录
|
|
</button>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|