collect-system/apps/web/src/components/models/course/detail/CourseDetailHeader/CourseDetailHeader.tsx

// components/Header.tsx
import { motion, useScroll, useTransform } from "framer-motion";
import { useContext, useEffect, useState } from "react";
import { CourseDetailContext } from "../CourseDetailContext";
import { Button } from "antd";

export const CourseDetailHeader = () => {
	const { scrollY } = useScroll();

	const [lastScrollY, setLastScrollY] = useState(0);
	const { course, isHeaderVisible, setIsHeaderVisible, lecture } =
		useContext(CourseDetailContext);
	useEffect(() => {
		const updateHeader = () => {
			const current = scrollY.get();
			const direction = current > lastScrollY ? "down" : "up";

			if (direction === "down" && current > 100) {
				setIsHeaderVisible(false);
			} else if (direction === "up") {
				setIsHeaderVisible(true);
			}

			setLastScrollY(current);
		};

		// 使用 requestAnimationFrame 来优化性能
		const unsubscribe = scrollY.on("change", () => {
			requestAnimationFrame(updateHeader);
		});

		return () => {
			unsubscribe();
		};
	}, [lastScrollY, scrollY, setIsHeaderVisible]);

	return (
		<motion.header
			initial={{ y: 0 }}
			animate={{ y: isHeaderVisible ? 0 : -100 }}
			transition={{ type: "spring", stiffness: 300, damping: 30 }}
			className="fixed top-0 left-0 w-full h-16 bg-slate-900 backdrop-blur-sm z-50 shadow-sm">
			<div className="w-full mx-auto px-4 h-full flex items-center justify-between">
				<div className="flex items-center space-x-4">
					<h1 className="text-white text-xl ">{course?.title}</h1>
				</div>
				<Button
					onClick={() => {
						console.log(lecture);
					}}>
					123
				</Button>
				<nav className="flex items-center space-x-4">
					<button className="px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors">
						开始学习
					</button>
				</nav>
			</div>
		</motion.header>
	);
};

export default CourseDetailHeader;