45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
'use client'
|
||
import {PanelLeftCloseIcon, PanelLeftOpenIcon} from 'lucide-react'
|
||
import {Button} from '@/components/ui/button'
|
||
import {useLayoutStore} from '@/app/stores'
|
||
import {merge} from '@/lib/utils'
|
||
import UserCenter from '@/components/composites/user-center'
|
||
import {User} from '@/lib/models'
|
||
|
||
export type HeaderProps = {
|
||
profile: User
|
||
}
|
||
|
||
export default function Header(props: HeaderProps) {
|
||
const navbar = useLayoutStore(store => store.navbar)
|
||
const toggleNavbar = useLayoutStore(store => store.toggleNavbar)
|
||
|
||
return (
|
||
<header className={merge(
|
||
`flex-none h-16 overflow-hidden`,
|
||
`flex items-stretch`,
|
||
)}>
|
||
{/* left */}
|
||
<div className="flex-auto flex items-center gap-2">
|
||
<Button
|
||
theme="ghost"
|
||
className="w-9 h-9 ml-4 md:ml-0"
|
||
onClick={toggleNavbar}>
|
||
{navbar
|
||
? <PanelLeftCloseIcon/>
|
||
: <PanelLeftOpenIcon/>
|
||
}
|
||
</Button>
|
||
<span className="max-md:hidden">
|
||
欢迎来到，蓝狐代理
|
||
</span>
|
||
</div>
|
||
|
||
{/* right */}
|
||
<div className="flex-none flex items-center justify-end pr-4">
|
||
<UserCenter profile={props.profile}/>
|
||
</div>
|
||
</header>
|
||
)
|
||
}
|