staff_data/apps/web/src/app/main/home/components/CoursesSection.tsx

import React, { useState, useMemo, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Card, Typography, Tag, Spin, Empty } from "antd";
import {
	PlayCircleOutlined,
	TeamOutlined,
	ArrowRightOutlined,
} from "@ant-design/icons";
import {
	courseDetailSelect,
	CourseDto,
	TaxonomySlug,
	TermDto,
} from "@nice/common";
import { api } from "@nice/client";
import CourseCard from "../../courses/components/CourseCard";
import { CoursesSectionTag } from "./CoursesSectionTag";
interface GetTaxonomyProps {
	categories: string[];
	isLoading: boolean;
}
function useGetTaxonomy({ type }): GetTaxonomyProps {
	const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
		api.term.findMany.useQuery({
			where: {
				taxonomy: {
					slug: type,
				},
			},
			include: {
				children: true,
			},
			take: 10, // 只取前10个
			orderBy: {},
		});
	const categories = useMemo(() => {
		const allCategories = isLoading
			? []
			: data?.map((course) => course.name);
		return [...Array.from(new Set(allCategories))];
	}, [data]);
	return { categories, isLoading };
}
// 不同分类跳转
function useFetchCoursesByCategory(category: string) {
	const isAll = category === "全部";
	const { data, isLoading }: { data: CourseDto[]; isLoading: boolean } =
		api.post.findMany.useQuery({
			where: isAll
				? {}
				: {
						terms: {
							some: {
								name: category,
							},
						},
					},
			take: 8,
			select: courseDetailSelect,
		});

	return { data, isLoading };
}
const { Title, Text } = Typography;
interface CoursesSectionProps {
	title: string;
	description: string;
	initialVisibleCoursesCount?: number;
}
const CoursesSection: React.FC<CoursesSectionProps> = ({
	title,
	description,
}) => {
	const navigate = useNavigate();
	const [selectedCategory, setSelectedCategory] = useState<string>("全部");
	const gateGory: GetTaxonomyProps = useGetTaxonomy({
		type: TaxonomySlug.CATEGORY,
	});
	const { data, isLoading: isDataLoading } =
		useFetchCoursesByCategory(selectedCategory);
	const filteredCourses = useMemo(() => {
		return selectedCategory === "全部"
			? data
			: data?.filter((c) =>
					c.terms.some((t) => t.name === selectedCategory)
				);
	}, [selectedCategory, data]);
	const displayedCourses = isDataLoading ? [] : filteredCourses;
  useEffect(()=>{
    console.log(data)
  })
	return (
		<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
			<div className="max-w-screen-2xl mx-auto px-6 relative">
				<div className="flex justify-between items-end mb-16">
					<div>
						<Title
							level={2}
							className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
							{title}
						</Title>
						<Text
							type="secondary"
							className="text-xl font-light text-gray-600">
							{description}
						</Text>
					</div>
				</div>

				<div className="mb-12 flex flex-wrap gap-4">
					{gateGory.isLoading ? (
						<Spin className="m-3" />
					) : (
						<>
							{['全部',...gateGory.categories].map((category,idx) => (
								<CoursesSectionTag key={idx} category= {category} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory}/>
							))}
						</>
					)}
				</div>

				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
					{isDataLoading ? (
						<Spin className="m-3" />
					) : (
						displayedCourses?.map((course,index) => (
							<CourseCard course={course} key={index}></CourseCard>
						))
					)}
				</div>
				{
					<div className="flex items-center gap-4 justify-between mt-12">
						<div className="h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
						<div className="flex justify-end">
							<Button
								type="link"
								onClick={() => navigate("/courses")}
								className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300">
								查看更多
								<ArrowRightOutlined />
							</Button>
						</div>
					</div>
				}
			</div>
		</section>
	);
};
export default CoursesSection;