77 lines
3.3 KiB
TypeScript
77 lines
3.3 KiB
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import { X } from "lucide-react"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
|
|||
|
|
interface PosterModalProps {
|
|||
|
|
isOpen: boolean
|
|||
|
|
onClose: () => void
|
|||
|
|
referralLink: string
|
|||
|
|
referralCode: string
|
|||
|
|
nickname: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function PosterModal({ isOpen, onClose, referralLink, referralCode, nickname }: PosterModalProps) {
|
|||
|
|
if (!isOpen) return null
|
|||
|
|
|
|||
|
|
// Use a public QR code API
|
|||
|
|
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(referralLink)}`
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|||
|
|
<div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
|
|||
|
|
|
|||
|
|
<div className="relative w-full max-w-sm bg-white rounded-xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="absolute top-2 right-2 p-1.5 bg-black/20 rounded-full text-white hover:bg-black/40 z-10"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{/* Poster Content */}
|
|||
|
|
<div className="bg-gradient-to-br from-indigo-900 to-purple-900 text-white p-6 flex flex-col items-center text-center relative overflow-hidden">
|
|||
|
|
{/* Decorative circles */}
|
|||
|
|
<div className="absolute top-0 left-0 w-32 h-32 bg-white/10 rounded-full -translate-x-1/2 -translate-y-1/2 blur-2xl" />
|
|||
|
|
<div className="absolute bottom-0 right-0 w-40 h-40 bg-pink-500/20 rounded-full translate-x-1/3 translate-y-1/3 blur-2xl" />
|
|||
|
|
|
|||
|
|
<div className="relative z-10 w-full flex flex-col items-center">
|
|||
|
|
{/* Book Title */}
|
|||
|
|
<h2 className="text-xl font-bold mb-1 leading-tight text-white">一场SOUL的<br/>创业实验场</h2>
|
|||
|
|
<p className="text-white/80 text-xs mb-6">真实商业故事 · 55个案例 · 每日更新</p>
|
|||
|
|
|
|||
|
|
{/* Cover Image Placeholder */}
|
|||
|
|
<div className="w-32 h-44 bg-gray-200 rounded shadow-lg mb-6 overflow-hidden relative">
|
|||
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|||
|
|
<img src="/images/image.png" alt="Book Cover" className="w-full h-full object-cover" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Recommender Info */}
|
|||
|
|
<div className="flex items-center gap-2 mb-4 bg-white/10 px-3 py-1.5 rounded-full backdrop-blur-sm">
|
|||
|
|
<span className="text-xs text-white">推荐人: {nickname}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* QR Code Section */}
|
|||
|
|
<div className="bg-white p-2 rounded-lg shadow-lg mb-2">
|
|||
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|||
|
|
<img src={qrCodeUrl} alt="QR Code" className="w-32 h-32" />
|
|||
|
|
</div>
|
|||
|
|
<p className="text-[10px] text-white/60 mb-1">长按识别二维码试读</p>
|
|||
|
|
<p className="text-xs font-mono tracking-wider text-white">邀请码: {referralCode}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Footer Actions */}
|
|||
|
|
<div className="p-4 bg-gray-50 flex flex-col gap-2">
|
|||
|
|
<p className="text-center text-xs text-gray-500 mb-1">
|
|||
|
|
长按上方图片保存，或截图分享
|
|||
|
|
</p>
|
|||
|
|
<Button onClick={onClose} className="w-full" variant="outline">
|
|||
|
|
关闭
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|