"use client"; import { CheckCircle2, Clock, Loader2, Mail, RefreshCw, XCircle, } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; export type VerificationStatus = | "pending" | "verifying" | "verified" | "expired" | "error"; interface StatusIconProps { status: VerificationStatus; } function StatusIcon({ status }: StatusIconProps) { switch (status) { case "verified": return (

); case "verifying": return (

); case "expired": case "error": return (

); default: return (

); } } interface StatusHeaderProps { status: VerificationStatus; email?: string; errorMessage?: string; } function StatusHeader({ status, email, errorMessage }: StatusHeaderProps) { const getStatusContent = (): { title: string; description: string } => { switch (status) { case "verified": return { title: "Email verified", description: "Your email address has been successfully verified.", }; case "verifying": return { title: "Verifying email", description: "Please wait while we verify your email address…", }; case "expired": return { title: "Verification link expired", description: "The verification link has expired. Please request a new one.", }; case "error": return { title: "Verification failed", description: errorMessage || "Something went wrong. Please try requesting a new verification link.", }; default: return { title: "Verify your email", description: email ? `We've sent a verification link to ${email}. Please check your inbox and click the link to verify your email address.` : "We've sent a verification link to your email address. Please check your inbox and click the link to verify your email address.", }; } }; const content = getStatusContent(); return ( <> {content.title} {content.description} ); } function PendingStateHelp() { return (

); } interface ResendButtonProps { cooldown: number; isResending: boolean; onResend: () => void; variant?: "default" | "outline"; label?: string; } function ResendButton({ cooldown, isResending, onResend, variant = "default", label = "Resend verification email", }: ResendButtonProps) { return ( ); } interface PendingStateProps { onResend?: () => void; cooldown: number; isResending: boolean; } function PendingState({ onResend, cooldown, isResending }: PendingStateProps) { return (

{onResend && ( )}

); } interface ExpiredErrorStateProps { onResend?: () => void; cooldown: number; isResending: boolean; } function ExpiredErrorState({ onResend, cooldown, isResending, }: ExpiredErrorStateProps) { if (!onResend) return null; return ( ); } function VerifiedState() { return (

You can now use all features of your account.

); } export interface AuthVerifyEmailProps { email?: string; status?: VerificationStatus; onResend?: () => void; onVerify?: (token: string) => void; className?: string; isLoading?: boolean; errorMessage?: string; resendCooldown?: number; } export default function AuthVerifyEmail({ email, status = "pending", onResend, onVerify, className, isLoading = false, errorMessage, resendCooldown = 60, }: AuthVerifyEmailProps) { const [cooldown, setCooldown] = useState(0); const [isResending, setIsResending] = useState(false); useEffect(() => { if (cooldown > 0) { const timer = setTimeout(() => { setCooldown((prev) => prev - 1); }, 1000); return () => clearTimeout(timer); } }, [cooldown]); const handleResend = useCallback(async () => { if (cooldown > 0 || isResending) return; setIsResending(true); try { await onResend?.(); setCooldown(resendCooldown); } finally { setIsResending(false); } }, [cooldown, isResending, onResend, resendCooldown]); return (

{status === "pending" && ( )} {(status === "expired" || status === "error") && ( )} {status === "verified" && }

); }

Example Usage