50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
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, isLoading, setSelectedLectureId } =
|
|
useContext(CourseDetailContext);
|
|
|
|
const handleLectureClick = (lectureId: string) => {
|
|
setSelectedLectureId(lectureId);
|
|
};
|
|
const [isSyllabusOpen, setIsSyllabusOpen] = useState(false);
|
|
return (
|
|
<div className="relative">
|
|
<CourseDetailHeader />
|
|
{/* 添加 Header 组件 */}
|
|
{/* 主内容区域 */}
|
|
{/* 为了防止 Header 覆盖内容，添加上边距 */}
|
|
<div className="pt-16">
|
|
{" "}
|
|
{/* 添加这个包装 div */}
|
|
<motion.div
|
|
animate={{
|
|
width: isSyllabusOpen ? "75%" : "100%",
|
|
}}
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
className="relative">
|
|
<CourseDetailDisplayArea
|
|
course={course}
|
|
isLoading={isLoading}
|
|
videoSrc="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
|
|
videoPoster="https://picsum.photos/800/450"
|
|
/>
|
|
</motion.div>
|
|
{/* 课程大纲侧边栏 */}
|
|
<CourseSyllabus
|
|
sections={course?.sections || []}
|
|
onLectureClick={handleLectureClick}
|
|
isOpen={isSyllabusOpen}
|
|
onToggle={() => setIsSyllabusOpen(!isSyllabusOpen)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|