training_data/apps/web/src/app/main/path/components/PathCard.tsx

import { Card, Rate, Tag, Typography, Button } from "antd";
import {
	EyeOutlined,
	PlayCircleOutlined,
	TeamOutlined,
} from "@ant-design/icons";
import { PostDto, TaxonomySlug } from "@nice/common";
import { useNavigate } from "react-router-dom";
interface pathCardProps {
	path: PostDto;
}
const { Title, Text } = Typography;
export default function PathCard({ path }: pathCardProps) {
	const navigate = useNavigate();
	const handleClick = (path: PostDto) => {
		navigate(`/path/editor/${path.id}`);
		window.scrollTo({ top: 0, behavior: "smooth" });
	};
	return (
		<Card
			onClick={() => handleClick(path)}
			key={path.id}
			hoverable
			className=" group overflow-hidden rounded-xl 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(${path?.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" /> */}
				</div>
			}>
			<div className="px-4">
				{path?.terms && path?.terms?.length > 0 ? (
					<div className="flex gap-2 mb-4">
						{path?.terms?.map((term) => {
							return (
								<Tag
									key={term.id}
									// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
									color={
										term?.taxonomy?.slug ===
										TaxonomySlug.CATEGORY
											? "blue"
											: term?.taxonomy?.slug ===
												  TaxonomySlug.LEVEL
												? "green"
												: "orange"
									}
									className="px-3 py-1 rounded-full  border-0">
									{term.name}
								</Tag>
							);
						})}
					</div>
				) : (
					<div className="flex gap-2 mb-4">
						<Tag
							color={"orange"}
							className="px-3 py-1 rounded-full  border-0">
							{"未设置分类"}
						</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> {path.title}</button>
				</Title>

				<div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
					{
						<div className="  gap-1 flex items-center flex-grow">
							<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
							{path?.depts && path?.depts?.length > 0 ? (
								<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
									{path?.depts?.length > 1
										? `${path.depts[0].name}等`
										: path?.depts?.[0]?.name}
									{/* {path?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */}
									{/* {path?.depts?.map((dept)=>{return dept.name})} */}
								</Text>
							) : (
								<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
									未设置单位
								</Text>
							)}
						</div>
					}
					<span className="flex text-xs font-medium text-gray-500">
						<EyeOutlined className="mr-2"></EyeOutlined>
						{path?.meta?.views
							? `观看次数 ${path?.meta?.views}`
							: 0}
					</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>
	);
}