30 lines
1.4 KiB
TypeScript
30 lines
1.4 KiB
TypeScript
import { Badge, Button, Input, Layout, Space, Typography } from '@arco-design/web-react'
|
|
import { IconApps, IconArrowLeft, IconArrowRight, IconMoon, IconNotification, IconQuestionCircle, IconSearch, IconSun } from '@arco-design/web-react/icon'
|
|
import type { Theme } from './project-types'
|
|
|
|
const { Header } = Layout
|
|
const { Text } = Typography
|
|
|
|
export function ProjectTopbar({ theme, onToggleTheme }: { theme: Theme; onToggleTheme: () => void }) {
|
|
return (
|
|
<Header className="topbar">
|
|
<div className="brand-lockup">
|
|
<span className="brand-symbol">S</span>
|
|
<Text className="brand-name">SenlinAI</Text>
|
|
</div>
|
|
<div className="global-search" role="search">
|
|
<Input size="large" prefix={<IconSearch />} placeholder="搜索项目、频道、文档、任务、联系人..." />
|
|
<Button size="large" type="primary">搜索</Button>
|
|
</div>
|
|
<Space className="topbar-actions">
|
|
<Button aria-label={theme === 'dark' ? '切换浅色模式' : '切换深色模式'} icon={theme === 'dark' ? <IconSun /> : <IconMoon />} onClick={onToggleTheme} />
|
|
<Button icon={<IconArrowLeft />} disabled />
|
|
<Button icon={<IconArrowRight />} disabled />
|
|
<Badge count={8} dot><Button icon={<IconNotification />} /></Badge>
|
|
<Button icon={<IconQuestionCircle />} />
|
|
<Button icon={<IconApps />} />
|
|
</Space>
|
|
</Header>
|
|
)
|
|
}
|