AI导哈

资源库组件

一个基于React和TypeScript构建的可过滤资源库组件，支持按标题、描述、资源类型、标签和年份进行搜索和筛选，并提供排序功能。

  • by ajeetraina
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 ajeetraina/resource-library-demo-oct27

使用说明

资源库组件

使用React和TypeScript构建的可过滤资源库组件。

特性

  • 🔍 按标题和描述搜索资源
  • 🏷️ 按资源类型筛选（白皮书、信息图、视频）
  • 🔖 按标签筛选
  • 📅 按年份筛选
  • ↕️ 对资源进行排序
  • ♿ 可访问（ARIA标签、键盘导航）
  • 📱 响应式网格布局

安装

npm install

运行测试

npm test

用法

import { ResourceLibrary, Resource } from './ResourceLibrary';

const resources: Resource[] = [
  {
    id: '1',
    type: 'White Paper',
    title: 'Understanding MCP Security',
    description: 'Learn about MCP security best practices',
    tags: ['Security', 'Docker MCP'],
    link: '/resources/mcp-security',
  },
  // ... more resources
];

function App() {
  return <ResourceLibrary resources={resources} />;
}

组件API

属性

道具 类型 必填 描述
resources Resource[] 是 要显示的资源对象数组

资源类型

interface Resource {
  id: string;
  type: 'White Paper' | 'Infographic' | 'Video';
  title: string;
  description: string;
  tags: string[];
  link: string;
}

测试

该组件包括3个烟雾测试：

  1. 组件渲染 -验证所有资源是否正确显示
  2. 搜索筛选 -测试搜索功能
  3. 复选框筛选 -测试类型筛选器复选框

使用以下工具运行测试：

npm test

技术栈

  • 反应18
  • TypeScript
  • 玩笑
  • React测试库
  • Lucide React（图标）

许可证

麻省理工学院

相关 MCP