collect-system/apps/web/src/app/main/course/page.tsx

import { CourseCard } from "@web/src/components/models/course/card/CourseCard";
import { CourseDetail } from "@web/src/components/models/course/detail/CourseDetailContent";
import { CourseSyllabus } from "@web/src/components/models/course/detail/CourseSyllabus";

export const CoursePage = () => {
	// 假设这些数据从API获取
	const course: any = {
		/* course data */
	};
	const sections: any = [
		/* sections data */
	];

	return (
		<div className="container mx-auto px-4 py-8">
			<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
				{/* 左侧课程详情 */}
				<div className="lg:col-span-2">
					<CourseDetail course={course} />
				</div>
				{/* 右侧课程大纲 */}
				<div className="space-y-4">
					<CourseCard course={course} />
					<CourseSyllabus
						sections={sections}
						onLectureClick={(lectureId) => {
							console.log("Clicked lecture:", lectureId);
						}}
					/>
				</div>
			</div>
		</div>
	);
};