Change Plan Dialog

1import { useId } from "react";
2 
3import { CheckIcon, RefreshCcwIcon } from "lucide-react";
4 
5import { Button } from "@/components/ui/button";
6import { Label } from "@/components/ui/label";
7import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
8import {
9  ResponsiveDialog,
10  ResponsiveDialogClose,
11  ResponsiveDialogContent,
12  ResponsiveDialogDescription,
13  ResponsiveDialogHeader,
14  ResponsiveDialogTitle,
15  ResponsiveDialogTrigger,
16} from "@/components/ui/revola";
17 
18export default function ChangePlanDialog() {
19  const id = useId();
20  return (
21    <ResponsiveDialog>
22      <ResponsiveDialogTrigger asChild>
23        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
24          Change plan
25        </Button>
26      </ResponsiveDialogTrigger>
27      <ResponsiveDialogContent className="overflow-hidden sm:max-w-[400px]">
28        <div className="space-y-4 overflow-y-auto p-6 max-sm:pt-4">
29          <div className="mb-2 flex flex-col gap-2">
30            <div className="flex size-11 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
31              <RefreshCcwIcon className="opacity-80" size={16} />
32            </div>
33            <ResponsiveDialogHeader className="text-left">
34              <ResponsiveDialogTitle>Change your plan</ResponsiveDialogTitle>
35              <ResponsiveDialogDescription>Pick one of the following plans.</ResponsiveDialogDescription>
36            </ResponsiveDialogHeader>
37          </div>
38          <form className="space-y-5">
39            <RadioGroup className="gap-2" defaultValue="2">
40              {/* Radio card #1 */}
41              <div className="shadow-xs relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 outline-none has-[[data-state=checked]]:border-primary/50 has-[[data-state=checked]]:bg-accent">
42                <RadioGroupItem
43                  value="1"
44                  id={`${id}-1`}
45                  aria-describedby={`${id}-1-description`}
46                  className="order-1 after:absolute after:inset-0"
47                />
48                <div className="grid grow gap-1">
49                  <Label htmlFor={`${id}-1`}>Essential</Label>
50                  <p id={`${id}-1-description`} className="text-xs text-muted-foreground">
51                    $4 per member/month
52                  </p>
53                </div>
54              </div>
55              {/* Radio card #2 */}
56// … truncated