staff_data/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx

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";
import { Button } from "antd";

export default function CourseDetailLayout() {
	const {
		course,
		selectedLectureId,
		lecture,
		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>
	);
}