Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 38x 38x 38x 38x 38x 38x 38x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x | 'use client';
import Link from 'next/link';
import { Sparkles, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { TIER_NAMES, type SubscriptionTier } from '@/lib/subscription/tiers';
interface UpgradePromptProps {
currentTier: SubscriptionTier;
feature: string;
suggestedTier?: SubscriptionTier;
compact?: boolean;
}
export function UpgradePrompt({
currentTier,
feature,
suggestedTier,
compact = false,
}: UpgradePromptProps) {
const targetTier = suggestedTier || (currentTier === 'free' ? 'basic' : 'pro');
if (compact) {
return (
<div className="flex items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 p-3">
<Sparkles className="h-4 w-4 text-primary" />
<span className="flex-1 text-sm">
Upgrade to {TIER_NAMES[targetTier]} to {feature}
</span>
<Button size="sm" asChild>
<Link href="/pricing">Upgrade</Link>
</Button>
</div>
);
}
return (
<Card className="border-primary/20 bg-primary/5">
<CardContent className="flex flex-col items-center p-6 text-center">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<Sparkles className="h-6 w-6 text-primary" />
</div>
<h3 className="mt-4 text-lg font-semibold">Upgrade to {TIER_NAMES[targetTier]}</h3>
<p className="mt-2 text-sm text-muted-foreground">
Your current {TIER_NAMES[currentTier]} plan doesn't include this feature. Upgrade to{' '}
{feature}.
</p>
<Button className="mt-4" asChild>
<Link href="/pricing">
View Plans
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
);
}
|