65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import { X, Zap } from "lucide-react"
|
||
|
|
import { CheckoutButton } from "@/components/forms/checkout-button"
|
||
|
|
|
||
|
|
interface UpgradeModalProps {
|
||
|
|
trigger: React.ReactNode
|
||
|
|
reason?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export function UpgradeModal({ trigger, reason }: UpgradeModalProps) {
|
||
|
|
const [open, setOpen] = useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div onClick={() => setOpen(true)}>{trigger}</div>
|
||
|
|
|
||
|
|
{open && (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||
|
|
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setOpen(false)} />
|
||
|
|
<div className="relative w-full max-w-md rounded-2xl border border-white/10 bg-[#16161f] p-6 shadow-2xl">
|
||
|
|
<button onClick={() => setOpen(false)} className="absolute right-4 top-4 text-white/30 hover:text-white transition">
|
||
|
|
<X className="h-4 w-4" />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600/20">
|
||
|
|
<Zap className="h-6 w-6 text-indigo-400" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 className="mt-4 text-lg font-bold text-white">Upgrade your plan</h2>
|
||
|
|
<p className="mt-2 text-sm text-white/50">
|
||
|
|
{reason ?? "You've reached the limit of your current plan. Upgrade to continue."}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="mt-6 space-y-3">
|
||
|
|
<div className="rounded-lg border border-indigo-500/20 bg-indigo-600/5 p-4">
|
||
|
|
<div className="flex items-baseline justify-between">
|
||
|
|
<span className="font-semibold text-white">Pro</span>
|
||
|
|
<span className="text-white/60">$29<span className="text-xs">/mo</span></span>
|
||
|
|
</div>
|
||
|
|
<p className="mt-1 text-xs text-white/40">10 properties · Unlimited tenants · AI features</p>
|
||
|
|
<div className="mt-3">
|
||
|
|
<CheckoutButton plan="pro" label="Upgrade to Pro" highlight />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-lg border border-white/[0.06] p-4">
|
||
|
|
<div className="flex items-baseline justify-between">
|
||
|
|
<span className="font-semibold text-white">Lifetime</span>
|
||
|
|
<span className="text-white/60">$199<span className="text-xs"> once</span></span>
|
||
|
|
</div>
|
||
|
|
<p className="mt-1 text-xs text-white/40">Unlimited everything · Forever</p>
|
||
|
|
<div className="mt-3">
|
||
|
|
<CheckoutButton plan="lifetime" label="Get Lifetime Deal" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|