113 lines
2.9 KiB
TypeScript
Executable File
113 lines
2.9 KiB
TypeScript
Executable File
import React, { useState, useMemo, ReactNode } from "react";
|
|
import { Typography, Skeleton } from "antd";
|
|
import { TaxonomySlug, TermDto } from "@nice/common";
|
|
import { api } from "@nice/client";
|
|
import { CoursesSectionTag } from "./CoursesSectionTag";
|
|
import LookForMore from "./LookForMore";
|
|
import PostList from "@web/src/components/models/course/list/PostList";
|
|
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,
|
|
},
|
|
parentId: null,
|
|
},
|
|
take: 11, // 只取前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;
|
|
postType:string;
|
|
render?:(post)=>ReactNode;
|
|
to:string
|
|
}
|
|
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|
title,
|
|
description,
|
|
initialVisibleCoursesCount = 8,
|
|
postType,
|
|
render,
|
|
to
|
|
}) => {
|
|
const [selectedCategory, setSelectedCategory] = useState<string>("全部");
|
|
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
|
type: TaxonomySlug.CATEGORY,
|
|
});
|
|
return (
|
|
<section className="relative py-16 overflow-hidden ">
|
|
<div className="max-w-screen-2xl mx-auto px-4 relative">
|
|
<div className="flex justify-between items-end mb-12 ">
|
|
<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>
|
|
<PostList
|
|
renderItem={(post) => render(post)}
|
|
params={{
|
|
page: 1,
|
|
pageSize: initialVisibleCoursesCount,
|
|
where: {
|
|
terms: !(selectedCategory === "全部")
|
|
? {
|
|
some: {
|
|
name: selectedCategory,
|
|
},
|
|
}
|
|
: {},
|
|
type: postType
|
|
},
|
|
}}
|
|
showPagination={false}
|
|
cols={4}></PostList>
|
|
<LookForMore to={to}></LookForMore>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
export default CoursesSection;
|