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/course-detail"
import { CourseSyllabus } from "@web/src/components/models/course/detail/course-syllabus"

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>
    )
}