study-tool
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { Plus, RefreshCw, ScrollText, Settings2 } from 'lucide-react'
|
|
|
|
import { Button } from './ui/Button'
|
|
|
|
export function TopBar({
|
|
refreshing,
|
|
onRefresh,
|
|
onSettings,
|
|
onSystemLog,
|
|
onAdd,
|
|
}: {
|
|
refreshing: boolean
|
|
onRefresh: () => void
|
|
onSettings: () => void
|
|
onSystemLog: () => void
|
|
onAdd: () => void
|
|
}) {
|
|
return (
|
|
<header className="sticky top-0 z-30 border-b border-line/80 bg-white/85 backdrop-blur-xl">
|
|
<div className="mx-auto flex h-16 max-w-[1320px] items-center gap-3 px-4 sm:px-6">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<div className="grid size-9 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-brand-500 to-sky-400 text-[15px] font-bold text-white shadow-md shadow-brand-500/30">
|
|
学
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="truncate text-[15px] font-semibold tracking-tight text-slate-900">
|
|
莞易学
|
|
</h1>
|
|
<span className="hidden rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-500 sm:inline">
|
|
多账号学习控制台
|
|
</span>
|
|
</div>
|
|
<p className="truncate text-[11.5px] text-slate-500">
|
|
东莞市教师培训平台 · 新旧版课程自动识别
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<div className="flex items-center gap-1.5">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onRefresh}
|
|
loading={refreshing}
|
|
title="刷新列表"
|
|
aria-label="刷新列表"
|
|
>
|
|
<RefreshCw className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onSystemLog}
|
|
title="系统日志"
|
|
aria-label="系统日志"
|
|
>
|
|
<ScrollText className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onSettings}
|
|
title="系统设置"
|
|
aria-label="系统设置"
|
|
>
|
|
<Settings2 className="size-4" />
|
|
</Button>
|
|
<Button variant="primary" className="ml-1" icon={<Plus className="size-4" />} onClick={onAdd}>
|
|
<span className="hidden sm:inline">添加账号</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|