pinned-categories.tsx
基本信息
- 类型: React Client Component
- 路径:
./src/components/categories/pinned-categories.tsx
功能描述
置顶分类筛选器组件，以标签按钮形式展示置顶分类列表。用户可以快速筛选特定分类的提示词，支持切换和清除筛选状态。
Props 接口
PinnedCategory
| 属性 | 类型 | 描述 |
|---|
id | string | 分类唯一标识 |
name | string | 分类名称 |
slug | string | 分类URL别名 |
icon | `string \ | null` | 分类图标（emoji） |
PinnedCategoriesProps
| 属性 | 类型 | 描述 |
|---|
categories | PinnedCategory[] | 置顶分类数组 |
currentCategoryId | `string \ | undefined` | 当前选中的分类ID |
依赖导入
next/navigation - Next.js 导航钩子next-intl - 国际化翻译@/lib/utils - 工具函数@/components/prompts/filter-context - 筛选上下文
主要功能
- 以圆角标签按钮形式展示置顶分类列表
- 第一个按钮为"全部分类"，可清除筛选
- 点击分类按钮切换筛选状态（选中/取消）
- 选中的分类按钮显示高亮样式
- 支持显示分类图标
- 切换分类时显示加载状态
- 自动重置分页到第一页
- 当没有置顶分类时返回 null 不渲染