56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import React from "react"
|
|
import { useActiveUser } from "@/hooks/useActiveUser"
|
|
import { Lock, Sparkles, ArrowRight } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
interface PremiumGateProps {
|
|
featureKey: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function PremiumGate({ featureKey, children }: PremiumGateProps) {
|
|
const { hasAccessTo, loading, user } = useActiveUser();
|
|
|
|
if (loading || !user) {
|
|
return (
|
|
<div className="flex-1 min-h-[400px] flex items-center justify-center">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="w-10 h-10 border-4 border-[var(--cyan-ai-20)] border-t-[var(--cyan-ai)] rounded-full animate-spin"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!hasAccessTo(featureKey)) {
|
|
return (
|
|
<div className="flex-1 min-h-[60vh] flex items-center justify-center p-6">
|
|
<div className="max-w-md w-full p-8 rounded-3xl bg-secondary/30 border border-border/50 text-center space-y-6 shadow-2xl backdrop-blur-xl relative overflow-hidden group">
|
|
{/* Background Glow */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-1/2 bg-[var(--cyan-ai)] opacity-5 blur-[80px] pointer-events-none group-hover:opacity-10 transition-opacity duration-700"></div>
|
|
|
|
<div className="relative">
|
|
<div className="w-16 h-16 mx-auto rounded-2xl bg-[var(--cyan-ai-10)] flex items-center justify-center shadow-[0_0_20px_-5px_var(--cyan-ai)] border border-[var(--cyan-ai-20)] mb-4 animate-in zoom-in duration-500">
|
|
<Lock className="text-[var(--cyan-ai)] w-8 h-8" />
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-black tracking-tight text-foreground">Premium Feature</h2>
|
|
<p className="text-muted-foreground mt-2 font-medium">
|
|
You need an active plan to access this exclusive tool.
|
|
</p>
|
|
</div>
|
|
|
|
<Link href="/upgrade" className="inline-flex items-center justify-center gap-2 w-full bg-[var(--cyan-ai)] text-black font-bold py-3.5 px-6 rounded-xl hover:bg-cyan-400 transition-all shadow-[0_0_20px_-5px_var(--cyan-ai)] hover:shadow-[0_0_30px_-5px_var(--cyan-ai)] group/btn">
|
|
<Sparkles className="w-4 h-4" />
|
|
Upgrade Plan to Unlock
|
|
<ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <>{children}</>;
|
|
}
|