Application dialogs4

1import { Button } from "@/ui/button";
2import {
3  Dialog,
4  DialogClose,
5  DialogContent,
6  DialogHeader,
7  DialogTitle,
8  DialogTrigger,
9} from "@/ui/dialog";
10import {
11  InputOTP,
12  InputOTPGroup,
13  InputOTPSlot,
14} from "@/ui/input-otp";
15import { Separator } from "@/ui/separator";
16import { Circle } from "@mynaui/icons-react";
17import { Fingerprint } from "lucide-react";
18 
19export default function AuthenticatorDialog() {
20  return (
21    <Dialog>
22      <DialogTrigger asChild>
23        <Button variant="outline">Authenticator</Button>
24      </DialogTrigger>
25      <DialogContent className="w-full gap-0 overflow-hidden p-0">
26        <div className="border-border bg-background flex w-full flex-col items-center justify-center rounded-lg border-b">
27          <DialogHeader className="border-border w-full border-b px-5 py-4">
28            <DialogTitle className="text-left font-medium tracking-tight">
29              Google 2-Step Verification
30            </DialogTitle>
31          </DialogHeader>
32 
33          <div className="flex flex-col gap-1.5 px-5 py-4">
34            <h3 className="text-sm font-medium">
35              Step 1: Install Google Authenticator
36            </h3>
37            <p className="text-muted-foreground text-sm">
38              Download the Google Authenticator app on your mobile device from
39              the{" "}
40              <Button
41                variant="link"
42                className="text-foreground h-auto p-0 text-sm leading-5 font-normal tracking-tight"
43              >
44                App Store
45              </Button>{" "}
46              or{" "}
47              <Button
48                variant="link"
49                className="text-foreground h-auto p-0 text-sm leading-5 font-normal tracking-tight"
50              >
51                Google Play
52              </Button>
53              .
54            </p>
55          </div>
56 
57          <Separator className="bg-border my-0" />
58 
59          <div className="flex flex-col gap-1.5 px-5 py-4">
60            <h3 className="text-sm font-medium">Step 2: Add Your Account</h3>
61            <p className="text-muted-foreground text-sm">
62              Open the Google Authenticator app. Tap the plus button and select
63              &quot;Scan a QR code&quot;.
64            </p>
65          </div>
66 
67          <Separator className="bg-border my-0" />
68 
69          <div className="flex gap-1.5 px-5 py-4 w-full justify-between">
70            <div className="flex flex-col gap-1.5">
71// … truncated