From 19b6cbd0edad9a2c0a391181df3d03f65c564468 Mon Sep 17 00:00:00 2001
From: Rao <1227431568@qq.com>
Date: Tue, 25 Feb 2025 17:45:00 +0800
Subject: [PATCH] rht02251745

---
 .../main/home/components/CoursesSection.tsx   | 44 +++----------------
 .../home/components/CoursesSectionTag.tsx     | 24 ++++++++++
 2 files changed, 29 insertions(+), 39 deletions(-)
 create mode 100644 apps/web/src/app/main/home/components/CoursesSectionTag.tsx

diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx
index 2117baa..a5652e0 100755
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@@ -9,6 +9,7 @@ import {
 import { 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;
@@ -106,51 +107,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>
diff --git a/apps/web/src/app/main/home/components/CoursesSectionTag.tsx b/apps/web/src/app/main/home/components/CoursesSectionTag.tsx
new file mode 100644
index 0000000..c03d718
--- /dev/null
+++ b/apps/web/src/app/main/home/components/CoursesSectionTag.tsx
@@ -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>
+        </>
+    )
+}