54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { UpgradeProButton } from "./UpgradeProButton";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
onContinueWithWatermark: () => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
/**
|
|
* Shown when a free user who already used their 2 watermark-free videos
|
|
* starts another render.
|
|
*/
|
|
export function WatermarkPaywallModal({ open, onContinueWithWatermark, onClose }: Props) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="watermark-paywall-title"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="w-full max-w-md rounded-lg border border-gray-700 bg-surface-light p-6 shadow-xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h2 id="watermark-paywall-title" className="text-lg font-semibold text-white">
|
|
You've used your 2 free watermark-free videos! 🎉
|
|
</h2>
|
|
<p className="mt-3 text-sm leading-relaxed text-gray-300">
|
|
Subsequent videos in the Free tier will include a small Songs2VID watermark. Upgrade to Pro
|
|
for unwatermarked videos, 4K export, and priority rendering.
|
|
</p>
|
|
<div className="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={onContinueWithWatermark}
|
|
className="rounded border border-gray-600 px-4 py-2 text-sm text-gray-200 hover:border-gray-400 hover:text-white"
|
|
>
|
|
Continue with Watermark
|
|
</button>
|
|
<UpgradeProButton
|
|
label="Upgrade to Pro"
|
|
className="inline-flex items-center justify-center rounded bg-accent px-4 py-2 text-sm font-medium text-black hover:opacity-90"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|