feat(TopBar): 添加搜索功能组件并优化结构
- 新增 SearchInput、SearchDropdown、SearchResultItem 和 TopBarActions 组件,增强 TopBar 的搜索功能。 - 更新 useTopBar 钩子以支持最近搜索功能,并优化搜索历史管理。 - 修改 TopBar 组件以整合新组件,提升可读性和可维护性。 - 更新 README.md,反映新增组件和功能。
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
import { type LucideIcon } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface TopBarAction {
|
||||
id: string;
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
interface TopBarActionsProps {
|
||||
actions: TopBarAction[];
|
||||
}
|
||||
|
||||
export default function TopBarActions({ actions }: TopBarActionsProps) {
|
||||
return (
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{actions.map(({ id, icon: Icon, title, onClick }) => (
|
||||
<Button
|
||||
key={id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
aria-label={title}
|
||||
className="h-8 w-8 text-muted-foreground"
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user