Application dialogs5

1import { Button } from "@/ui/button";
2import { Checkbox } from "@/ui/checkbox";
3import {
4  Dialog,
5  DialogClose,
6  DialogContent,
7  DialogFooter,
8  DialogTrigger,
9} from "@/ui/dialog";
10import { Input } from "@/ui/input";
11import { Label } from "@/ui/label";
12import { RadioGroup, RadioGroupItem } from "@/ui/radio-group";
13import { Separator } from "@/ui/separator";
14import { ShieldCheck } from "@mynaui/icons-react";
15 
16export default function PaymentDialog() {
17  return (
18    <Dialog>
19      <DialogTrigger asChild>
20        <Button variant="outline">Make a Payment</Button>
21      </DialogTrigger>
22      <DialogContent>
23        <div className="flex w-full flex-col items-center gap-6 overflow-hidden">
24          <div className="flex w-full flex-col gap-1">
25            <h3 className="text-base font-medium">Add New Payment Method</h3>
26          </div>
27 
28          <div className="flex w-full flex-col items-center justify-center gap-6">
29            <RadioGroup className="w-full gap-2" defaultValue="credit-card">
30              <div className="border-input data-[state=checked]:border-ring relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none">
31                <RadioGroupItem
32                  value="credit-card"
33                  id="payment-1"
34                  aria-describedby="payment-1-description"
35                  className="order-1 after:absolute after:inset-0"
36                />
37                <div className="flex grow items-center gap-3">
38                  <svg
39                    width="35"
40                    height="25"
41                    viewBox="0 0 35 25"
42                    fill="none"
43                    xmlns="http://www.w3.org/2000/svg"
44                  >
45                    <path
46                      d="M0.25 4.5C0.25 2.42893 1.92893 0.75 4 0.75H31C33.0711 0.75 34.75 2.42893 34.75 4.5V20.5C34.75 22.5711 33.0711 24.25 31 24.25H4C1.92893 24.25 0.25 22.5711 0.25 20.5V4.5Z"
47                      fill="white"
48                      stroke="#E2E8F0"
49                      strokeWidth="0.5"
50                    />
51                    <path
52                      fillRule="evenodd"
53                      clipRule="evenodd"
54// … truncated