Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc
This commit is contained in:
commit
9c717a10df
|
@ -14,6 +14,7 @@ import {
|
||||||
} from "@nice/common";
|
} from "@nice/common";
|
||||||
import { api } from "@nice/client";
|
import { api } from "@nice/client";
|
||||||
import CourseCard from "../../courses/components/CourseCard";
|
import CourseCard from "../../courses/components/CourseCard";
|
||||||
|
import { CoursesSectionTag } from "./CoursesSectionTag";
|
||||||
interface GetTaxonomyProps {
|
interface GetTaxonomyProps {
|
||||||
categories: string[];
|
categories: string[];
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
|
@ -111,51 +112,16 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
<Spin className="m-3" />
|
<Spin className="m-3" />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Tag
|
{['全部',...gateGory.categories].map((category) => (
|
||||||
color={
|
<CoursesSectionTag category= {category} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory}/>
|
||||||
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>
|
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
{displayedCourses.length === 0 ? (
|
{isDataLoading ? (
|
||||||
<div className="col-span-full">
|
<Spin className="m-3" />
|
||||||
<Empty
|
|
||||||
description="暂无课程"
|
|
||||||
image={Empty.PRESENTED_IMAGE_DEFAULT}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
displayedCourses?.map((course) => (
|
displayedCourses?.map((course) => (
|
||||||
<CourseCard course={course}></CourseCard>
|
<CourseCard course={course}></CourseCard>
|
||||||
|
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue