ng-webot

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Heart, MessageCircle } from 'lucide-react'

/**
 * 赞赏码卡片：展示赞赏码（public/zanshang.png）。
 */
export function DonateCard() {
  return (
    <Card className="h-fit">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <Heart className="h-4 w-4 text-primary" /> 赞赏支持
        </CardTitle>
        <CardDescription>如果本项目对你有帮助，欢迎扫码赞赏支持</CardDescription>
      </CardHeader>
      <CardContent>
        <figure className="space-y-1.5 text-center">
          <img
            src="/zanshang.png"
            alt="赞赏码"
            className="mx-auto h-40 w-40 rounded-lg border bg-white object-contain p-1"
          />
          <figcaption className="text-xs text-muted-foreground">扫码赞赏</figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}

/**
 * 联系作者卡片：展示作者微信二维码（public/wechat.png）。
 */
export function ContactCard() {
  return (
    <Card className="h-fit">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <MessageCircle className="h-4 w-4 text-primary" /> 联系作者
        </CardTitle>
        <CardDescription>扫码添加作者微信，交流反馈</CardDescription>
      </CardHeader>
      <CardContent>
        <figure className="space-y-1.5 text-center">
          <img
            src="/wechat.png"
            alt="作者微信"
            className="mx-auto h-40 w-40 rounded-lg border bg-white object-contain p-1"
          />
          <figcaption className="text-xs text-muted-foreground">作者微信</figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}