37 lines
1004 B
TypeScript
37 lines
1004 B
TypeScript
|
import { Course } from "@nice/common";
|
||
|
|
import React, { useContext } from "react";
|
||
|
|
import { Typography, Skeleton } from "antd"; // 引入 antd 组件
|
||
|
|
import { CourseDetailContext } from "./CourseDetailContext";
|
||
|
|
|
||
|
|
interface CourseDetailProps {
|
||
|
|
course: Course;
|
||
|
|
isLoading: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CourseDetailDescription: React.FC<CourseDetailProps> = () => {
|
||
|
|
const { course, isLoading } = useContext(CourseDetailContext);
|
||
|
|
const { Paragraph, Title } = Typography;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6">
|
||
|
|
{isLoading || !course ? (
|
||
|
|
<Skeleton active paragraph={{ rows: 4 }} />
|
||
|
|
) : (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="text-lg font-bold">{"课程简介"}</div>
|
||
|
|
<Paragraph
|
||
|
|
ellipsis={{
|
||
|
|
rows: 3,
|
||
|
|
expandable: true,
|
||
|
|
symbol: "展开",
|
||
|
|
onExpand: () => console.log("展开"),
|
||
|
|
// collapseText: "收起",
|
||
|
|
}}>
|
||
|
|
{course.content}
|
||
|
|
</Paragraph>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|