Spaces:
Running
Running
| "use client"; | |
| import React from "react"; | |
| import { useRouter } from "next/navigation"; | |
| import { Sparkles, X } from "lucide-react"; | |
| interface UpgradePromptProps { | |
| /** Which plan the user needs to unlock the feature */ | |
| requiredPlan?: "Creator" | "Studio"; | |
| /** Short description of the feature the user tried to access */ | |
| feature?: string; | |
| /** Optional; if set the prompt shows inline, otherwise it auto-hides after 8 s */ | |
| variant?: "banner" | "toast"; | |
| /** Called when the user dismisses the prompt */ | |
| onDismiss?: () => void; | |
| } | |
| /** | |
| * A small upgrade prompt shown when a user tries to use a feature | |
| * that requires an upgrade. | |
| */ | |
| export default function UpgradePrompt({ | |
| requiredPlan = "Creator", | |
| feature = "this feature", | |
| variant = "banner", | |
| onDismiss, | |
| }: UpgradePromptProps) { | |
| const router = useRouter(); | |
| const [visible, setVisible] = React.useState(true); | |
| // Auto-dismiss after 8 seconds for the toast variant | |
| React.useEffect(() => { | |
| if (variant !== "toast") return; | |
| const id = setTimeout(() => { | |
| setVisible(false); | |
| onDismiss?.(); | |
| }, 8000); | |
| return () => clearTimeout(id); | |
| }, [variant, onDismiss]); | |
| if (!visible) return null; | |
| return ( | |
| <div | |
| className="upgrade-prompt" | |
| style={{ | |
| display: "flex", | |
| alignItems: "center", | |
| gap: "var(--space-3)", | |
| padding: "var(--space-3) var(--space-4)", | |
| borderRadius: "var(--radius-md)", | |
| background: "linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(245, 158, 11, 0.08))", | |
| border: "1px solid rgba(108, 92, 231, 0.2)", | |
| fontSize: "var(--text-sm)", | |
| position: variant === "toast" ? "fixed" : "relative", | |
| bottom: variant === "toast" ? "var(--space-6)" : undefined, | |
| right: variant === "toast" ? "var(--space-6)" : undefined, | |
| zIndex: variant === "toast" ? 1000 : undefined, | |
| maxWidth: variant === "toast" ? 400 : undefined, | |
| boxShadow: variant === "toast" ? "var(--shadow-lg)" : undefined, | |
| }} | |
| role="status" | |
| aria-live="polite" | |
| > | |
| <Sparkles size={18} color="var(--color-primary)" style={{ flexShrink: 0 }} /> | |
| <div style={{ flex: 1 }}> | |
| <strong>{feature}</strong> requires the <strong>{requiredPlan}</strong> plan. | |
| {" "} | |
| <button | |
| onClick={() => router.push("/settings/billing")} | |
| className="btn btn-primary" | |
| style={{ | |
| fontSize: "var(--text-xs)", | |
| padding: "2px 12px", | |
| height: "auto", | |
| display: "inline-flex", | |
| marginLeft: "var(--space-2)", | |
| }} | |
| > | |
| Upgrade | |
| </button> | |
| </div> | |
| {onDismiss && ( | |
| <button | |
| onClick={() => { | |
| setVisible(false); | |
| onDismiss(); | |
| }} | |
| style={{ | |
| background: "none", | |
| border: "none", | |
| cursor: "pointer", | |
| color: "var(--text-tertiary)", | |
| padding: 2, | |
| }} | |
| aria-label="Dismiss" | |
| > | |
| <X size={14} /> | |
| </button> | |
| )} | |
| </div> | |
| ); | |
| } | |