linfeng
/
staff_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-02-23 22:51:33 +08:00
parent c1941145a6
commit 1c34c62b06
1 changed files with 62 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
apps/web/src/components/models/course/detail/CourseDetailDescription/Description/Overview.tsx
View File

@ -1,67 +1,67 @@
import { useContext } from "react";
import { CourseDetailContext } from "../../CourseDetailContext";
import { CheckCircleIcon } from "@heroicons/react/24/solid";
// import { useContext } from "react";
// import { CourseDetailContext } from "../../CourseDetailContext";
// import { CheckCircleIcon } from "@heroicons/react/24/solid";
export function Overview() {
const { course } = useContext(CourseDetailContext);
return (
<>
<div className="space-y-8">
{/* 课程描述 */}
<div className="prose max-w-none">
<p>{course?.description}</p>
</div>
// export function Overview() {
// const { course } = useContext(CourseDetailContext);
// return (
// <>
// <div className="space-y-8">
// {/* 课程描述 */}
// <div className="prose max-w-none">
// <p>{course?.description}</p>
// </div>
{/* 学习目标 */}
<div>
<h2 className="text-xl font-semibold mb-4">学习目标</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{course?.objectives.map((objective, index) => (
<div key={index} className="flex items-start gap-2">
<CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0 mt-1" />
<span>{objective}</span>
</div>
))}
</div>
</div>
// {/* 学习目标 */}
// <div>
// <h2 className="text-xl font-semibold mb-4">学习目标</h2>
// <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
// {course?.objectives.map((objective, index) => (
// <div key={index} className="flex items-start gap-2">
// <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0 mt-1" />
// <span>{objective}</span>
// </div>
// ))}
// </div>
// </div>
{/* 适合人群 */}
<div>
<h2 className="text-xl font-semibold mb-4">适合人群</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{course?.audiences.map((audience, index) => (
<div key={index} className="flex items-start gap-2">
<CheckCircleIcon className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
<span>{audience}</span>
</div>
))}
</div>
</div>
// {/* 适合人群 */}
// <div>
// <h2 className="text-xl font-semibold mb-4">适合人群</h2>
// <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
// {course?.audiences.map((audience, index) => (
// <div key={index} className="flex items-start gap-2">
// <CheckCircleIcon className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
// <span>{audience}</span>
// </div>
// ))}
// </div>
// </div>
{/* 课程要求 */}
<div>
<h2 className="text-xl font-semibold mb-4">课程要求</h2>
<ul className="list-disc list-inside space-y-2 text-gray-700">
{course?.requirements.map((requirement, index) => (
<li key={index}>{requirement}</li>
))}
</ul>
</div>
// {/* 课程要求 */}
// <div>
// <h2 className="text-xl font-semibold mb-4">课程要求</h2>
// <ul className="list-disc list-inside space-y-2 text-gray-700">
// {course?.requirements.map((requirement, index) => (
// <li key={index}>{requirement}</li>
// ))}
// </ul>
// </div>
{/* 可获得技能 */}
<div>
<h2 className="text-xl font-semibold mb-4">可获得技能</h2>
<div className="flex flex-wrap gap-2">
{course?.skills.map((skill, index) => (
<span
key={index}
className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
{skill}
</span>
))}
</div>
</div>
</div>
</>
);
}
// {/* 可获得技能 */}
// <div>
// <h2 className="text-xl font-semibold mb-4">可获得技能</h2>
// <div className="flex flex-wrap gap-2">
// {course?.skills.map((skill, index) => (
// <span
// key={index}
// className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
// {skill}
// </span>
// ))}
// </div>
// </div>
// </div>
// </>
// );
// }