This commit is contained in:
Li1304553726 2025-02-25 17:45:18 +08:00
commit 9c717a10df
2 changed files with 29 additions and 39 deletions

View File

@ -14,6 +14,7 @@ import {
} from "@nice/common";
import { api } from "@nice/client";
import CourseCard from "../../courses/components/CourseCard";
import { CoursesSectionTag } from "./CoursesSectionTag";
interface GetTaxonomyProps {
categories: string[];
isLoading: boolean;
@ -111,51 +112,16 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
<Spin className="m-3" />
) : (
<>
<Tag
color={
selectedCategory === "全部"
? "blue"
: "default"
}
onClick={() => setSelectedCategory("全部")}
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${
selectedCategory === "全部"
? "bg-blue-600 text-white shadow-lg"
: "bg-white text-gray-600 hover:bg-gray-100"
}`}>
</Tag>
{gateGory.categories.map((category) => (
<Tag
key={category}
color={
selectedCategory === category
? "blue"
: "default"
}
onClick={() => {
setSelectedCategory(category);
}}
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${
selectedCategory === category
? "bg-blue-600 text-white shadow-lg"
: "bg-white text-gray-600 hover:bg-gray-100"
}`}>
{category}
</Tag>
{['全部',...gateGory.categories].map((category) => (
<CoursesSectionTag category= {category} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory}/>
))}
</>
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{displayedCourses.length === 0 ? (
<div className="col-span-full">
<Empty
description="暂无课程"
image={Empty.PRESENTED_IMAGE_DEFAULT}
/>
</div>
{isDataLoading ? (
<Spin className="m-3" />
) : (
displayedCourses?.map((course) => (
<CourseCard course={course}></CourseCard>

View File

@ -0,0 +1,24 @@
import { Tag } from "antd";
export function CoursesSectionTag({category, selectedCategory, setSelectedCategory}) {
return (
<>
<Tag
key={category}
color={
selectedCategory === category
? "blue"
: "default"
}
onClick={() => {
setSelectedCategory(category);
}}
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
? "bg-blue-600 text-white shadow-lg"
: "bg-white text-gray-600 hover:bg-gray-100"
}`}>
{category}
</Tag>
</>
)
}