Application dialogs6

1import { Button } from "@/ui/button";
2import { Dialog, DialogContent, DialogTrigger } from "@/ui/dialog";
3import {
4  ArrowRight,
5  CheckDiamondSolid,
6  CheckHexagonSolid,
7  Diamond,
8} from "@mynaui/icons-react";
9 
10export default function PayNowDialog() {
11  return (
12    <Dialog>
13      <DialogTrigger asChild>
14        <Button variant="outline">Pay Now</Button>
15      </DialogTrigger>
16      <DialogContent className="bg-muted flex w-full flex-col items-center gap-6 overflow-hidden p-6">
17        <div className="flex w-full flex-col gap-0.5 text-left">
18          <p className="text-primary text-sm font-semibold tracking-tight">
19            MynaUI Pro
20          </p>
21          <h3 className="text-lg font-bold">Elevate Your Development</h3>
22          <p className="text-muted-foreground text-sm">
23            Everything you need to build exceptional interfaces.
24          </p>
25        </div>
26 
27        <div className="flex w-full flex-col items-center justify-center gap-6">
28          <div className="border-border grid w-full grid-cols-1 divide-y rounded-lg border">
29            <div className="flex items-center justify-between p-3">
30              <div className="flex items-center gap-2">
31                <CheckDiamondSolid
32                  stroke={2}
33                  fill="currentColor"
34                  className="text-primary h-5 w-5"
35                />
36                <p className="text-center align-middle text-sm leading-5 font-semibold tracking-normal">
37                  Yearly
38                </p>
39              </div>
40 
41              <div className="flex items-center gap-1">
42                <p className="align-middle text-2xl leading-none font-bold">
43                  $89
44                </p>
45                <span className="text-muted-foreground align-middle text-sm leading-none font-normal tracking-normal">
46                  /year
47                </span>
48              </div>
49            </div>
50            <div className="flex items-center justify-between p-3">
51              <div className="flex items-center gap-2">
52                <Diamond className="text-border h-5 w-5" />
53                <p className="text-center align-middle text-sm leading-5 font-semibold tracking-normal">
54                  Monthly
55                </p>
56              </div>
57 
58              <div className="flex items-center gap-1">
59                <p className="align-middle text-2xl leading-none font-bold">
60                  $19
61                </p>
62// … truncated