60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { Card, Typography, Button } from "antd";
|
|
|
|
import { PostDto } from "@nice/common";
|
|
import DeptInfo from "@web/src/app/main/path/components/DeptInfo";
|
|
import TermInfo from "@web/src/app/main/path/components/TermInfo";
|
|
|
|
interface PostCardProps {
|
|
post?: PostDto;
|
|
onClick?: (post?: PostDto) => void;
|
|
}
|
|
const { Title } = Typography;
|
|
export default function PostCard({ post, onClick }: PostCardProps) {
|
|
const handleClick = (post: PostDto) => {
|
|
onClick?.(post);
|
|
};
|
|
return (
|
|
<Card
|
|
onClick={() => handleClick(post)}
|
|
key={post?.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(${post?.meta?.thumbnail})`,
|
|
}}
|
|
/>
|
|
</div>
|
|
}>
|
|
<div className="px-4 ">
|
|
<div className="overflow-hidden hover:overflow-auto">
|
|
<div className="flex gap-2 h-7 mb-4 whiteSpace-nowrap">
|
|
<TermInfo post={post}></TermInfo>
|
|
</div>
|
|
</div>
|
|
<Title
|
|
level={4}
|
|
className="mb-4 mt-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> {post?.title}</button>
|
|
</Title>
|
|
<div className="flex items-center mb-4 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
|
|
<DeptInfo post={post}></DeptInfo>
|
|
</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>
|
|
);
|
|
}
|