75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import { CheckCircleIcon } from '@heroicons/react/24/outline'
|
|
import { Course } from "@nice/common"
|
|
interface CourseDetailProps {
|
|
course: Course
|
|
}
|
|
|
|
export const CourseDetail: React.FC<CourseDetailProps> = ({ course }) => {
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* 课程标题区域 */}
|
|
<div className="space-y-4">
|
|
<h1 className="text-3xl font-bold">{course.title}</h1>
|
|
{course.subTitle && (
|
|
<p className="text-xl text-gray-600">{course.subTitle}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 课程描述 */}
|
|
<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.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>
|
|
<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>
|
|
)
|
|
} |