51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
interface SearchResultHeaderProps {
|
|
total: number;
|
|
viewMode: 'grid' | 'list';
|
|
onViewModeChange: (mode: 'grid' | 'list') => void;
|
|
sortBy: string;
|
|
onSortChange: (sort: string) => void;
|
|
}
|
|
|
|
export function SearchResultHeader({
|
|
total,
|
|
viewMode,
|
|
onViewModeChange,
|
|
sortBy,
|
|
onSortChange
|
|
}: SearchResultHeaderProps) {
|
|
return (
|
|
<div className="result-header">
|
|
<div className="result-info">
|
|
为您找到 <span className="result-count">{total}</span> 个相关模板
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="view-toggle">
|
|
<button
|
|
className={`view-btn ${viewMode === 'grid' ? 'active' : ''}`}
|
|
onClick={() => onViewModeChange('grid')}
|
|
aria-label="网格视图"
|
|
>
|
|
<i className="ri-grid-line"></i>
|
|
</button>
|
|
<button
|
|
className={`view-btn ${viewMode === 'list' ? 'active' : ''}`}
|
|
onClick={() => onViewModeChange('list')}
|
|
aria-label="列表视图"
|
|
>
|
|
<i className="ri-list-check"></i>
|
|
</button>
|
|
</div>
|
|
<select
|
|
className="px-3 py-3 border border-gray-200 rounded-lg text-sm"
|
|
value={sortBy}
|
|
onChange={(e) => onSortChange(e.target.value)}
|
|
>
|
|
<option value="relevance">相关排序</option>
|
|
<option value="newest">最新更新</option>
|
|
{/* <option value="popular">使用频率</option>
|
|
<option value="rating">评分最高</option> */}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|