57 lines
1.5 KiB
TypeScript
Executable File
57 lines
1.5 KiB
TypeScript
Executable File
import { motion } from "framer-motion";
|
|
import { useContext, useState } from "react";
|
|
import { CourseDetailContext } from "./CourseDetailContext";
|
|
|
|
import CourseDetailDisplayArea from "./CourseDetailDisplayArea";
|
|
import { CourseSyllabus } from "./CourseSyllabus/CourseSyllabus";
|
|
import { CourseDetailHeader } from "./CourseDetailHeader/CourseDetailHeader";
|
|
|
|
export default function CourseDetailLayout() {
|
|
const {
|
|
course,
|
|
selectedLectureId,
|
|
lecture,
|
|
isLoading,
|
|
setSelectedLectureId,
|
|
} = useContext(CourseDetailContext);
|
|
|
|
const handleLectureClick = (lectureId: string) => {
|
|
setSelectedLectureId(lectureId);
|
|
};
|
|
const [isSyllabusOpen, setIsSyllabusOpen] = useState(true);
|
|
return (
|
|
<div className="relative">
|
|
<CourseDetailHeader />
|
|
|
|
{/* 添加 Header 组件 */}
|
|
{/* 主内容区域 */}
|
|
{/* 为了防止 Header 覆盖内容，添加上边距 */}
|
|
<div className="pt-16">
|
|
{" "}
|
|
{/* 添加这个包装 div */}
|
|
<motion.div
|
|
initial={{
|
|
width: "75%",
|
|
}}
|
|
animate={{
|
|
width: isSyllabusOpen ? "75%" : "100%",
|
|
}}
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
className="relative">
|
|
<CourseDetailDisplayArea
|
|
// course={course}
|
|
// isLoading={isLoading}
|
|
/>
|
|
</motion.div>
|
|
{/* 课程大纲侧边栏 */}
|
|
<CourseSyllabus
|
|
sections={course?.sections || []}
|
|
onLectureClick={handleLectureClick}
|
|
isOpen={isSyllabusOpen}
|
|
onToggle={() => setIsSyllabusOpen(!isSyllabusOpen)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|