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