"use client";
import { useState } from "react";
import { Check, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";
const plans = [
{
name: "Pro",
monthlyPrice: 12,
annualPrice: 9,
description: "For individuals and small teams",
features: [
"Up to 10 team members",
"20GB storage",
"Priority support",
"Advanced analytics",
"Custom integrations",
],
popular: false,
},
{
name: "Business",
monthlyPrice: 29,
annualPrice: 24,
description: "For growing businesses",
features: [
"Unlimited team members",
"100GB storage",
"24/7 phone support",
"Advanced analytics",
"Custom integrations",
"SSO authentication",
"Audit logs",
],
popular: true,
},
];
export const title = "React Dialog Block Upgrade Plan";
export default function DialogUpgradePlan() {
const [open, setOpen] = useState(false);
const [annual, setAnnual] = useState(true);
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button>
<Sparkles className="mr-2 h-4 w-4" />
Upgrade Plan
</Button>
</DialogTrigger>
</div>
<DialogContent style={{ maxWidth: "600px" }}>
<DialogHeader>
<DialogTitle>Upgrade your plan</DialogTitle>
<p className="text-sm text-muted-foreground">
Choose the plan that works best for you and your team.
</p>
</DialogHeader>
<div className="flex items-center justify-center gap-3 py-4">
<Label
htmlFor="billing-toggle"
className={cn("text-sm", !annual && "text-foreground font-medium")}
>
Monthly
</Label>
<Switch
id="billing-toggle"
checked={annual}
onCheckedChange={setAnnual}
/>
<Label
htmlFor="billing-toggle"
className={cn("text-sm", annual && "text-foreground font-medium")}
>
Annual
<span className="ml-1.5 text-xs text-primary font-medium">
Save 20%
</span>
</Label>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{plans.map((plan) => (
<Card
key={plan.name}
className={cn(
"relative",
plan.popular && "border-primary shadow-md"
)}
>
{plan.popular && (
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
<span className="bg-primary text-primary-foreground text-xs font-medium px-3 py-1 rounded-full">
Most Popular
</span>
</div>
)}
<CardHeader className="pb-4">
<CardTitle className="text-lg">{plan.name}</CardTitle>
<p className="text-sm text-muted-foreground">
{plan.description}
</p>
<div className="pt-2">
<span className="text-3xl font-bold">
${annual ? plan.annualPrice : plan.monthlyPrice}
</span>
<span className="text-muted-foreground">/month</span>
<p className="text-xs text-muted-foreground mt-1 h-4">
{annual && `Billed annually ($${plan.annualPrice * 12}/year)`}
</p>
</div>
</CardHeader>
<CardContent className="space-y-4">
<ul className="space-y-2">
{plan.features.map((feature) => (
<li key={feature} className="flex items-center gap-2 text-sm">
<Check className="h-4 w-4 text-primary flex-shrink-0" />
{feature}
</li>
))}
</ul>
<Button
className="w-full"
variant={plan.popular ? "default" : "outline"}
>
{plan.popular ? "Upgrade to Business" : "Upgrade to Pro"}
</Button>
</CardContent>
</Card>
))}
</div>
<p className="text-xs text-center text-muted-foreground pt-2">
All plans include a 14-day free trial. Cancel anytime.
</p>
</DialogContent>
</Dialog>
);
}