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

import React, { useState, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Typography, Skeleton } from "antd";
import { ArrowRightOutlined } from "@ant-design/icons";
import { TaxonomySlug, TermDto } from "@nice/common";
import { api } from "@nice/client";
import { CoursesSectionTag } from "./CoursesSectionTag";
import CourseList from "../../../../components/models/course/list/CourseList";
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,
				},
			},
			take: 10, // 只取前10个
		});
	const categories = useMemo(() => {
		const allCategories = isLoading
			? []
			: data?.map((course) => course.name);
		return [...Array.from(new Set(allCategories))];
	}, [data]);
	return { categories, isLoading };
}
const { Title, Text } = Typography;
interface CoursesSectionProps {
	title: string;
	description: string;
	initialVisibleCoursesCount?: number;
}
const CoursesSection: React.FC<CoursesSectionProps> = ({
	title,
	description,
	initialVisibleCoursesCount = 8,
}) => {
	const navigate = useNavigate();
	const [selectedCategory, setSelectedCategory] = useState<string>("全部");
	const gateGory: GetTaxonomyProps = useGetTaxonomy({
		type: TaxonomySlug.CATEGORY,
	});
	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 ? (
						<Skeleton paragraph={{ rows: 2 }}></Skeleton>
					) : (
						<>
							{["全部", ...gateGory.categories].map(
								(category, idx) => (
									<CoursesSectionTag
										key={idx}
										category={category}
										selectedCategory={selectedCategory}
										setSelectedCategory={
											setSelectedCategory
										}
									/>
								)
							)}
						</>
					)}
				</div>
				<CourseList
					params={{
						page: 1,
						pageSize: initialVisibleCoursesCount,
						where: {
							terms: !(selectedCategory === "全部")
								? {
										some: {
											name: selectedCategory,
										},
									}
								: {},
						},
					}}
					showPagination={false}
					cols={4}></CourseList>
				{
					<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;