training_data/apps/web/src/app/main/courses/components/CourseCard.tsx

import { Card, Rate, Tag ,Typography,Button} from 'antd';
import { Course } from '../mockData';
import { UserOutlined, ClockCircleOutlined, PlayCircleOutlined, TeamOutlined } from '@ant-design/icons';
import { CourseDto } 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>
  );
}