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 ;
}

组件API

属性

资源类型

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（图标）

许可证

麻省理工学院