Auth Verify Email

1"use client";
2 
3import {
4  CheckCircle2,
5  Clock,
6  Loader2,
7  Mail,
8  RefreshCw,
9  XCircle,
10} from "lucide-react";
11import { useCallback, useEffect, useState } from "react";
12import { cn } from "@/lib/utils";
13import { Button } from "@/registry/new-york/ui/button";
14import {
15  Card,
16  CardContent,
17  CardDescription,
18  CardHeader,
19  CardTitle,
20} from "@/registry/new-york/ui/card";
21 
22export type VerificationStatus =
23  | "pending"
24  | "verifying"
25  | "verified"
26  | "expired"
27  | "error";
28 
29interface StatusIconProps {
30  status: VerificationStatus;
31}
32 
33function StatusIcon({ status }: StatusIconProps) {
34  switch (status) {
35    case "verified":
36      return (
37        <div className="flex size-16 items-center justify-center rounded-full bg-primary/10">
38          <CheckCircle2 aria-hidden="true" className="size-8 text-primary" />
39        </div>
40      );
41    case "verifying":
42      return (
43        <div className="flex size-16 items-center justify-center rounded-full bg-primary/10">
44          <Loader2
45            aria-hidden="true"
46            className="size-8 animate-spin text-primary"
47          />
48        </div>
49      );
50    case "expired":
51    case "error":
52      return (
53        <div className="flex size-16 items-center justify-center rounded-full bg-destructive/10">
54          <XCircle aria-hidden="true" className="size-8 text-destructive" />
55        </div>
56      );
57    default:
58      return (
59        <div className="flex size-16 items-center justify-center rounded-full bg-muted">
60          <Mail aria-hidden="true" className="size-8 text-muted-foreground" />
61        </div>
62      );
63  }
64}
65 
66interface StatusHeaderProps {
67  status: VerificationStatus;
68  email?: string;
69  errorMessage?: string;
70}
71 
72function StatusHeader({ status, email, errorMessage }: StatusHeaderProps) {
73  const getStatusContent = (): { title: string; description: string } => {
74    switch (status) {
75      case "verified":
76        return {
77          title: "Email verified",
78          description: "Your email address has been successfully verified.",
79        };
80      case "verifying":
81        return {
82          title: "Verifying email",
83          description: "Please wait while we verify your email address…",
84        };
85      case "expired":
86        return {
87          title: "Verification link expired",
88          description:
89            "The verification link has expired. Please request a new one.",
90        };
91      case "error":
92        return {
93          title: "Verification failed",
94// … truncated