49 lines
1.7 KiB
TypeScript
Executable File
49 lines
1.7 KiB
TypeScript
Executable File
import { Card, Rate, Tag } from 'antd';
|
|
import { Course } from '../mockData';
|
|
import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
|
|
|
|
interface CourseCardProps {
|
|
course: Course;
|
|
}
|
|
|
|
export default function CourseCard({ course }: CourseCardProps) {
|
|
return (
|
|
<Card
|
|
hoverable
|
|
className="w-full h-full transition-all duration-300 hover:shadow-lg"
|
|
cover={
|
|
<img
|
|
alt={course.title}
|
|
src={course.thumbnail}
|
|
className="object-cover w-full h-40"
|
|
/>
|
|
}
|
|
>
|
|
<div className="space-y-3">
|
|
<h3 className="text-lg font-semibold line-clamp-2 hover:text-blue-600 transition-colors">
|
|
{course.title}
|
|
</h3>
|
|
<p className="text-gray-500 text-sm">{course.instructor}</p>
|
|
<div className="flex items-center space-x-2">
|
|
<Rate disabled defaultValue={course.rating} className="text-sm" />
|
|
<span className="text-gray-500 text-sm">{course.rating}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm text-gray-500">
|
|
<div className="flex items-center space-x-1">
|
|
<UserOutlined className="text-gray-400" />
|
|
<span>{course.enrollments} 人在学</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<ClockCircleOutlined className="text-gray-400" />
|
|
<span>{course.duration}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 pt-2">
|
|
<Tag color="blue" className="rounded-full px-3">{course.category}</Tag>
|
|
<Tag color="green" className="rounded-full px-3">{course.level}</Tag>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|