linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

aff

This commit is contained in:
ditiqi 2025-02-25 19:30:56 +08:00
parent 7a33ae89b5
commit dc8bc72687
1 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/web/src/app/main/courses/components/CourseList.tsx
View File

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