91 lines
3.2 KiB
TypeScript
Executable File
91 lines
3.2 KiB
TypeScript
Executable File
import { Card, Rate, Tag, Typography, Button } from "antd";
|
|
import { Course } from "../mockData";
|
|
import {
|
|
UserOutlined,
|
|
ClockCircleOutlined,
|
|
PlayCircleOutlined,
|
|
TeamOutlined,
|
|
} from "@ant-design/icons";
|
|
import { CourseDto, TaxonomySlug } from "@nice/common";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
interface CourseCardProps {
|
|
course: CourseDto;
|
|
}
|
|
const { Title, Text } = Typography;
|
|
export default function CourseCard({ course }: CourseCardProps) {
|
|
const navigate = useNavigate();
|
|
const handleClick = (course: CourseDto) => {
|
|
navigate(`/course/${course.id}/detail`);
|
|
};
|
|
return (
|
|
<Card
|
|
onClick={() => handleClick(course)}
|
|
key={course.id}
|
|
hoverable
|
|
className="group overflow-hidden rounded-2xl border border-gray-200 bg-white
|
|
shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
|
|
cover={
|
|
<div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center transform transition-all duration-700 ease-out group-hover:scale-110"
|
|
style={{
|
|
backgroundImage: `url(${course?.meta?.thumbnail})`,
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
|
|
<PlayCircleOutlined className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl text-white/90 opacity-0 group-hover:opacity-100 transition-all duration-300" />
|
|
</div>
|
|
}>
|
|
<div className="px-4">
|
|
<div className="flex gap-2 mb-4">
|
|
<Tag
|
|
color="blue"
|
|
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
|
{course.terms?.[0].name}
|
|
</Tag>
|
|
|
|
<Tag
|
|
color={
|
|
course.terms?.[1].name === "入门"
|
|
? "green"
|
|
: course.terms?.[1].name === "中级"
|
|
? "blue"
|
|
: "purple"
|
|
}
|
|
className="px-3 py-1 rounded-full border-0">
|
|
{course.terms?.[1].name}
|
|
</Tag>
|
|
</div>
|
|
<Title
|
|
level={4}
|
|
className="mb-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left">
|
|
<button> {course.title}</button>
|
|
</Title>
|
|
|
|
<div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
|
|
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
|
<div className="ml-2 flex items-center flex-grow">
|
|
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
|
|
{course?.depts?.[0]?.name}
|
|
</Text>
|
|
</div>
|
|
<span className="text-xs font-medium text-gray-500">
|
|
观看次数{course?.meta?.views}次
|
|
</span>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-gray-100 text-center">
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
className="w-full shadow-[0_8px_20px_-6px_rgba(59,130,246,0.5)] hover:shadow-[0_12px_24px_-6px_rgba(59,130,246,0.6)]
|
|
transform hover:translate-y-[-2px] transition-all duration-500 ease-out">
|
|
立即学习
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|