雨霖铃
d401744739
- 新增 SearchInput、SearchDropdown、SearchResultItem 和 TopBarActions 组件，增强 TopBar 的搜索功能。 - 更新 useTopBar 钩子以支持最近搜索功能，并优化搜索历史管理。 - 修改 TopBar 组件以整合新组件，提升可读性和可维护性。 - 更新 README.md，反映新增组件和功能。
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { type FeatureConfig } from '@/config/features';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface SearchResultItemProps {
|
|
feature: FeatureConfig;
|
|
selected: boolean;
|
|
onSelect: (feature: FeatureConfig) => void;
|
|
}
|
|
|
|
const SearchResultItem = React.memo(({ feature, selected, onSelect }: SearchResultItemProps) => {
|
|
return (
|
|
<li
|
|
role="option"
|
|
aria-selected={selected}
|
|
onClick={() => onSelect(feature)}
|
|
className={cn(
|
|
'flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors',
|
|
selected ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60',
|
|
)}
|
|
>
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted/80 text-muted-foreground">
|
|
{feature.icon && <feature.icon className="h-4 w-4" />}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate font-medium text-foreground">{feature.label}</p>
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground">{feature.description}</p>
|
|
</div>
|
|
</li>
|
|
);
|
|
});
|
|
SearchResultItem.displayName = 'SearchResultItem';
|
|
|
|
export default SearchResultItem;
|