cqh963852
3637129fd5
- 新增 CourseShelf 组件：title/desc/done/relations 卡片，hover 轮播预期成果 GIF - static/gifs 占位动图 6 张（同名替换即成片） - design-refs/pinterest 设计稿参考 13 张，含出处与版权说明 - .gitignore 忽略 .zcodeignore 工具本地配置
28 lines
896 B
TypeScript
28 lines
896 B
TypeScript
import React from "react";
|
|
import Heading from "@theme/Heading";
|
|
import { courseSections } from "./courses";
|
|
import CourseCard from "./CourseCard";
|
|
import styles from "./styles.module.css";
|
|
|
|
/**
|
|
* 课程预览书架：全栈工程师教程的卡片总览（取代目录树式预览）。
|
|
* 数据见 courses.ts；卡片交互见 CourseCard.tsx。
|
|
*/
|
|
export default function CourseShelf() {
|
|
return (
|
|
<section className={styles.shelf}>
|
|
<Heading as="h2" className={styles.heading}>
|
|
全栈工程师教程 · 课程书架
|
|
</Heading>
|
|
<p className={styles.subheading}>
|
|
共 {courseSections.length} 个部分。悬停卡片，预览学完这一部分能得到什么。
|
|
</p>
|
|
<div className={styles.grid}>
|
|
{courseSections.map((course) => (
|
|
<CourseCard key={course.id} course={course} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|