aff

apps/web/src/app/main/courses/components/CourseList.tsx

@@ -1,6 +1,6 @@
-import { Pagination, Empty } from "antd";
+import { Pagination, Empty, Skeleton } from "antd";
 import CourseCard from "./CourseCard";
-import { CourseDto, Prisma } from "@nice/common";
+import { courseDetailSelect, CourseDto, Prisma } from "@nice/common";
 import { api } from "@nice/client";
 import { DefaultArgs } from "@prisma/client/runtime/library";
 import { useEffect, useMemo, useState } from "react";
@@ -11,6 +11,8 @@ interface CourseListProps {
 		where?: Prisma.PostWhereInput;
 		select?: Prisma.PostSelect<DefaultArgs>;
 	};
+	cols?: number;
+	showPagination?: boolean;
 }
 interface CoursesPagnationProps {
 	data: {
@@ -19,10 +21,15 @@ interface CoursesPagnationProps {
 	};
 	isLoading: boolean;
 }
-export default function CourseList({ params }: CourseListProps) {
+export default function CourseList({
+	params,
+	cols = 3,
+	showPagination = true,
+}: CourseListProps) {
 	const [currentPage, setCurrentPage] = useState<number>(params?.page || 1);
 	const { data, isLoading }: CoursesPagnationProps =
 		api.post.findManyWithPagination.useQuery({
+			select: courseDetailSelect,
 			...params,
 			page: currentPage,
 		});
@@ -51,20 +58,26 @@ export default function CourseList({ params }: CourseListProps) {
 		<div className="space-y-6">
 			{courses.length > 0 ? (
 				<>
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-						{courses.map((course) => (
-							<CourseCard key={course.id} course={course} />
-						))}
-					</div>
-					<div className="flex justify-center mt-8">
-						<Pagination
-							current={currentPage}
-							total={totalPages}
-							pageSize={params?.pageSize}
-							onChange={onPageChange}
-							showSizeChanger={false}
-						/>
+					<div className={`grid grid-cols-${cols} gap-6`}>
+						{isLoading ? (
+							<Skeleton paragraph={{ rows: 5 }}></Skeleton>
+						) : (
+							courses.map((course) => (
+								<CourseCard key={course.id} course={course} />
+							))
+						)}
 					</div>
+					{showPagination && (
+						<div className="flex justify-center mt-8">
+							<Pagination
+								current={currentPage}
+								total={totalPages}
+								pageSize={params?.pageSize}
+								onChange={onPageChange}
+								showSizeChanger={false}
+							/>
+						</div>
+					)}
 				</>
 			) : (
 				<Empty description="暂无相关课程" />